css 如何做到自适应（CSS中实现元素水平垂直居中的几种方法总结）
css 如何做到自适应（CSS中实现元素水平垂直居中的几种方法总结）上下左右均为 0 位置绝对定位且 margin: auto。.box1 { width: 400px; height: 400px; background-color: red; position: relative; } .box2 { width: 200px; height: 100px; background-color: blue; position: absolute; display: inline-block; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }注意：此方法需要知道元素的宽和高。<div class="box1"> <div class="box2"></div> </
关注微信公众号“前端大侦探”了解更多精彩内容！
今天我们聊一个CSS布局中一个老生常谈的问题就是元素的水平垂直居中。不管在面试还是平时写网页布局，都是经常需要使用的。
之前我也面试过别人或者被别人面试，这个问题的出现频率也是非常高的，面试官一般都会问：元素的水平垂直居中你能有几种实现方法？面试官想要你尽可能地多说几种方法，如果你只说一两种方法，可能就不能赢得面试官的倾心。
在实际写代码过程中，遇到各种场景的水平垂直居中，可能还要去网上百度，不能做到信手拈来，作为一个合格的“前端攻城狮”确实有点不应该。那么，这篇文章就教你在遇到这类问题时怎么征服面试官，怎么做到信手拈来？
1、绝对定位 负margin值<div class="box1">
<div class="box2"></div>
</div>
.box1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
/* 子容器box2宽的1/2的负值 */
margin-left: -100px;
/* 子容器box2高的1/2的负值 */
margin-top: -50px;
}
效果图：
注意：此方法需要知道元素的宽和高。
这种在实际工作中用得最多，而且兼容性也好。
2、绝对定位 left/right/bottom/top margin.box1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
height: 100px;
background-color: blue;
position: absolute;
display: inline-block;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
注意：此方法需要知道元素的宽和高。
上下左右均为 0 位置绝对定位且 margin: auto。
3、绝对定位 transform.box1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
/*
transform 属性向元素应用 2D 或 3D 转换。
该属性允许我们对元素进行旋转、缩放、移动或倾斜。
*/
/* translate(x y) 定义 2D 转换。 */
transform: translate(-50% -50%);
}
CSS3新增动画效果中的 transform 变换属性，使得这个问题有了更好的解决方法，就是使用 transform 代替 margin 。transform 中 translate 偏移的百分比是相对于自身大小而说的。
注意： 此方法知不知道元素的宽和高皆可适用。
4、相对定位 transform.box1{
width: 400px;
height: 400px;
background: red;
}
.box2{
width: 200px;
height: 100px;
background: blue;
margin: 0 auto;
position: relative;
top: 50%;
/*第一种：margin-top*/
/*margin-top: -50px;*/
/*第二种：transform：转换*/
transform: translateY(-50%);
}
此方法不需要使用绝对定位，只需要使用相对定位。第一种使用margin-top的方法需要知道元素的高度，第二种使用transform的方法不需要知道元素的高度即可。
5、flex布局.box1 {
width: 400px;
height: 400px;
background-color: red;
/* webkit 内核的浏览器，必须加上-webkit前缀。 */
display: -webkit-flex;/* Safari */
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
width: 200px;
height: 100px;
background-color: blue;
}
弹性布局flex在不考虑兼容性时我认为是这种方法是最好用最方便的，不需要考虑元素的宽和高，只需要给父元素设置display: flex; justify-content: center; align-items: center;就可以了。
注意： 此方法知不知道元素的宽和高皆可适用。
6、display:table布局<div class="box1">
<div class="box2">我要水平垂直居中</div>
</div>
.box1{
width: 400px;
height: 400px;
background-color: yellow;
text-align: center;
display: table;
}
.box2{
background-color: red;
display: table-cell;
vertical-align: middle;
}
效果图：
.box1 {
width: 400px;
height: 400px;
background-color: red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 当元素定宽高时，display: inline-block;可以替换成margin: auto; */
.box2 {
width: 200px;
height: 100px;
background-color: blue;
/* 可以换成margin: auto; */
display: inline-block;
}
/* 当元素不定宽高时，只能使用display: inline-block; */
.box2 {
background-color: blue;
display: inline-block;
}
注意： 此方法知不知道元素的宽和高皆可适用。
8、flex变异布局<div class="box1">
<div class="box2">我要水平垂直居中</div>
</div>
.box1 {
width: 400px;
height: 400px;
margin: 0 auto;
background: red;
/* Webkit 内核的浏览器，必须加上-webkit前缀。 */
display: -webkit-flex;/* Safari */
display: flex;
}
.box2 {
/* width: 100px;
height: 100px; */
background: blue;
margin: auto;
}
父元素设置 display: flex；子元素设置 margin: auto。
注意： 此方法知不知道元素的宽和高皆可适用。
9、before伪类<div class="box">我要水平垂直居中</div>
.box {
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
}
.box::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
效果图：
同理，伪类after也能实现同样效果。
10、writing-mode属性布局<div class="box1">
<div class="box2">
<p>我要水平垂直居中</p>
</div>
</div>
.box1 {
width: 200px;
height: 200px;
border: 1px solid red;
writing-mode: vertical-lr;
text-align: center;
}
.box1>.box2 {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box1>.box2>p {
display: inline-block;
margin: auto;
text-align: left;
background: yellow;
}
效果图：
writing-mode 属性定义了文本在水平或垂直方向上如何排布。horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom。
writing-mode的具体用法可以去https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode学习。
11、grid flex布局.box1 {
width: 400px;
height: 400px;
background: red;
display: grid;
}
.box2 {
background: blue;
align-self: center;
justify-self: center;
}
css的网格布局，通过grid也可以实现水平垂直居中。代码量很少，但兼容性不如flex，不推荐使用。当做一个知识点学习了解一下。
12、grid margin布局.box1 {
width: 400px;
height: 400px;
background: red;
display: grid;
}
.box2 {
background: blue;
margin: auto;
}总结
对比各种方法的优缺点，简单总结一下（仅代表个人观点）。
- 现在随着IE浏览器的慢慢消亡，PC端也可以大胆使用弹性布局Flex，如果要考虑兼容性的话，且宽高固定，可以使用绝对定位 负margin值（上面第一种方法）；如果要考虑兼容性的话，且宽高不固定，可以使用table-cell布局（上面第七种方法）；如果不考虑兼容性的话，首选Flex布局（上面第五种方法）。
- 移动端推荐使用flex。
