共计 1990 个字符，预计需要花费 5 分钟才能阅读完成。
CSS 实现居中，无论在实际开发和面试都是常见的内容。
本文总结了实现居中常见的几种方式，包含宽度已知 / 未知及兼容性的要求。
.pn {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.box {
background-color: #eee;
}
.size {
width: 100px;
height: 100px;
}
<body>
<div class=”pn”>
<div class=”box size”> 啦啦啦 </div>
</div>
</body>
这一段是公共内容，pn 类是父容器，box 类代表需要居中的元素，size 类控制是否定义高度。
line-height
利用行内元素高度和行高相同的居中效果，此方法常用于单行文本的垂直居中效果。
.pn {
line-height: 500px;
text-align: center;
font-size: 0;
}
.box {
font-size: 14px;
display: inline-block;
line-height: initial;
text-align: left;
}
absolute margin 负值
父元素设置为定位元素，子元素的绝对定位是基于父元素的宽高，这个效果可以达到居中的目的。
由于定位的基点是基于子元素的左上角，需要根据元素自身的尺寸做对应的偏移纠正。
此方法是最常用的居中方式，兼容效果好，需要已知子元素的高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: 50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
absolute auto
该方法同样是基于定位实现，先将子元素的定位都设置为 0，再将 margin 设置为 auto 就可以实现居中。
兼容效果好，需要已知子元素的高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
absolute calc
该方法同样是基于定位实现，利用 calc 特性直接计算定位的偏移位置。
需要兼容 css3 的 calc 特性，已知子元素的高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: calc(50% – 50px);
left: calc(50% – 50px);
}
absolute transform
该方法同样是基于定位实现，利用 transform 偏移自身的位置实现居中。
需要兼容 css3 的 transform 特性，不需要已知高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%)
}
table
利用 table 元素天然垂直居中的特性实现居中效果。
使用 table 做布局背离了语义化的初衷，也会产生很多冗余的代码，不建议使用。
.pn{
text-align: center;
}
.box{
display: inline-block;
}
<table>
<tbody>
<tr>
<td class=”pn”>
<div class=”box”> 啦啦啦 </div>
</td>
</tr>
</tbody>
</table>
css-table
利用 css 的 table 属性，可以让普通元素拥有 table 元素的特性和效果。
原理和 table 一样，兼容效果好，不需要已知高度。
.pn {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
flex
flex 是 css3 中最新布局方式，可以很方便实现各种布局效果。
利用 flex 的 justify-content 和 align-items 特性实现居中效果。
该方法实现简单，但是需要兼容 flex 特性。
.pn {
display: flex;
justify-content: center;
align-items: center;
}
grid
grid 是最新的布局方式，利用 justify-self 和 align-self 可以快速实现居中效果。
grid 现在的兼容性不太好，使用时要注意。
.pn{
display: grid;
}
.box{
justify-self: center;
align-self: center;
}
总结
居中效果可由多种方式实现，各实现方式有其特点和兼容特性
设备
高度
版本
推荐
PC
未知
IE8-
css-table
PC
已知
IE8-
absolute margin 负值
PC
未知
IE8+
absolute transform
PC
已知
IE8+
absolute transform
移动
*
*
absolute transform
