单列布局的 CSS 实现方式
水平居中
使用inline-block和text-align实现
兼容性好，但是需要同时设置子元素和父元素
.parent {
text-align: center;
}
.child {
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
使用margin实现
兼容性好，但是只适用于子元素指定来宽度的情况
.child {
width: 200px;
margin: 0 auto;
}
<div>
<div class="child"></div>
</div>
使用table+margin实现
需要对 IE6、IE7 做兼容
.child {
display: table;
margin: 0 auto;
}
<div>
<div class="child"></div>
</div>
使用绝对定位+transform实现
需要对transform做兼容，IE9 以上才可用
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translate(-50%);
}
<div class="parent">
<div class="child"></div>
</div>
使用flex实现
需要对flex进行兼容，大面积布局可能会影响效率
.parent {
position: flex;
justify-content: center;
}
<div class="parent">
<div></div>
</div>
垂直居中
使用vertical-align实现
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block），
其身上的vertical-align属性才会起作用。
.parent {
display: table-cell;
vertical-align: middle;
height: 20px;
}
或是
.parent {
display: inline-block;
vertical-align: middle;
line-height: 20px;
}
<div class="parent">
<div></div>
</div>
使用绝对定位实现
.parent {
position: relative;
height: 200px;
}
.child {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="parent">
<div class="child"></div>
</div>
使用flex实现
.parent {
display: flex;
align-items: center;
height: 200px;
}
<div class="parent">
<div></div>
</div>
水平垂直全部居中
使用vertical-align，text-align，inline-block实现
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 200px;
}
.child {
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
使用绝对定位实现
.parent {
position: relative;
height: 200px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
使用flex实现
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
<div class="parent">
<div></div>
</div>
