前端面试题：CSS实现水平垂直居中
这是一个挺常见的前端面试题，但是没有做过总结。有的时候可能会使用完了，很长一段时间不去使用，会慢慢忘记。所以，温故而知新，还是很有必要的。
一、绝对定位元素的居中实现
这一种工作中用的应该是最多的，兼容性也是很好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位元素的居中实现margin</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*高度的一半*/
margin-left: -50px; /宽度的一半*/
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
效果：
缺点：需要提前知道元素的尺寸。如果不知道元素尺寸，这个时候就需要JS获取了。
CSS3.0的兴起，使这个问题有了更好的解决方法，就是使用 transform 代替 margin 。
transform 中 translate 偏移的百分比是相对于自身大小而说的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>未知宽高的元素水平垂直居中transform</title>
<style>
.content{
background: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
</style>
</head>
<body>
<div class="content">你复合1233肥反反复复</div>
</body>
</html>
效果：
优点：无论绝对定位元素的尺寸是多少，它都是水平垂直居中显示的。
缺点：就是兼容性问题。
二、margin: auto;实现绝对定位元素的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin:auto实现绝对定位元素的居中</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
效果：
注意：
上下左右均为 0 位置绝对定位。
margin: auto;
三、CSS3.0弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中==弹性布局</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的元素水平居中*/
}
.content{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果：
四、vertical-align:middle;垂直方向居中
verical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
允许指定负长度值和百分比值。这会是元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vertical-align:middle;</title>
<style>
.big-box{
width: 500px;
height: 400px;
background: green;
text-align: center;
}
.box{
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="big-box">
<span class="box">
<img src="ermao.jpg"/>
</span>
</div>
</body>
</html>
效果：
五、display:table实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display: table-cell;</title>
<style>
.parent{
width: 300px;
height: 300px;
background: orange;
text-align: center;
display: table;
}
.son{
display: table-cell;
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">nihaosssss</div>
</div>
</body>
</html>
效果：
六、相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现水平垂直居中==相对定位实现</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content{
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;/*水平居中*/
position: relative;/*设置position*/
top: 50%; /*偏移*/
/*margin-top: -150px;*/ /*第一种：margin-top*/
transform: translateY(-50%);/*第二种：transform：转换*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果：
前端面试题：CSS实现水平垂直居中的更多相关文章
- 前端面试题-CSS优先级
一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...
- 前端面试题-CSS选择器
一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...
- 前端面试题-CSS Hack
一.CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不一 ...
- 前端面试题 ----css篇
转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...
- 前端面试题CSS一（题目来源网络）
一.什么是html5语义化? 使用合理,正确的html标签格式化文档. 二.CSS样式优先级? 就近原则,行内>内联>外联 三 什么是盒模型? 主要分为两种,w3c标准盒模型,IE标准模型 ...
- 常见前端面试题CSS部分
1.盒模型 IE 盒子模型:IE的width部分包含了 border 和 pading; 标准 W3C 盒子模型: width/height+border+padding+margin; 2.清除浮动 ...
- 前端面试题（HTML/CSS）
(前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...
- 常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
随机推荐
- linux安装 redis
通过源码编译安装 1.下载源码包 wget http://download.redis.io/releases/redis-4.0.10.tar.gz 2.解压缩redis tar -zxf redi ...
- xcode archive灰色,无法打包的解决办法
问题如图: 解决办法:目前的运行配置是使用模拟器,改成“iOS Device”即可 step1: step2: 修改后archive选项变为黑色,可点击状态了
- 如何实现免登陆功能（cookie session？）
Cookie的机制 Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能. Cookie的Domain和Path属性标识 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_3_对象的反序列化流_ObjectInputStream
声明了IO异常,这里还是红色的 转换为Person对象
- Oracle数据库文件导出为CSV格式的方法
1 安装PLSQL Developer,并连接Oracle数据库. 2 执行sql语句,将要导出的表格显示出来. select * from table名; 3 如下点击导出查询结果,选择数据格式,即 ...
- 孩子王app自动签到送现金券
今天在某商场的孩子王店给小孩买东西时发现,app连续签到3天即可获得一张5元现金券. 回到家中,花几分钟Fiddler抓包分析写了个自动签到的代码. var cookies = new string[ ...
- 数模常用算法系列Matlab实现-----线性规划
线性规划的 Matlab 标准形式 线性规划的目标函数可以是求最大值,也可以是求最小值,约束条件的不等号可以是小于号也可以是大于号.为了避免这种形式多样性带来的不便,Matlab 中规定线性 规划的标 ...
- [10期]浅谈SSRF安全漏洞
引子:SSRF 服务端请求伪造攻击 很多web应用都提供从其他服务器上获取数据的功能.使用用户指定的URL,web应用可以从其他服务器获取图片,下载文件,读取文件内容等. 这个功能被恶意使用的话,可以 ...
- 20191105 《Spring5高级编程》笔记-第5章
第5章 Spring AOP 面向切面编程(AOP)是面向对象编程(OOP)的补充.AOP通常被称为实施横切关注点的工具.术语横切关注点是指应用程序中无法从应用程序的其余部分分解并且可能导致代码重复和 ...
- oracle--多表联合查询sql92版
sql92学习 -查询员工姓名,工作,薪资,部门名称 sql的联合查询(多表查询) --1.sql92标准 ----笛卡尔积:一件事情的完成需要很多步骤,而不同的步骤有很多种方式,完成这件事情的所有方 ...