一、水平居中
1.方法一
适用于： display 为 inline 或 inline-block 的元素
方法： 给父元素设置 text-align:center
2.方法二
适用于： 已知宽度的块状元素(已知像素宽或百分比)
方法： 设置左右 margin 值为 auto
3. 方法三
适用于： 未知宽度的块状元素
方法： 设置为display:table或者在元素外面加入table标签（包括<tr> <td>），然后可以当成定宽元素使用margin:0 auto
**注： ** 利用 table 标签的长度自适应性---即不定义其长度也不默认父元素 body 的长度（ table 其长度根据其内文本长度决定），因此可以看做一个定宽度块元素。
4. 方法四
方法： 为父元素设置 display:flex以及justify-content:center
注： flex 是Flexible Box 的缩写,意为"弹性布局"。
5. 方法五
适用于： 宽度已知的元素
方法： 设置position:absolute以及left:50%，并将margin-left设置为 -1/2 的宽度值。
二、垂直居中
1.方法一
适用于：父元素高度确定，子元素为一个或多个 inline 或 inline-block 元素，或者子元素为一个块状（block）元素。
方法： 设置父元素的 height 和line-height高度一致。
<div class="wrap">
<span>我是垂直居中的单个元素。</span>
</div>
div.wrap{
background:#ddd;
height:100px;
line-height:100px; // 与 height 相同。
}
span{
background:#aaa;
}
垂直居中的单个元素
弊端：当子元素为多个 inline 或 inline-block 元素且内容的长度大于父元素的宽时，就有内容脱离了块。如下图：
多个元素时可能脱离父元素
2.方法二
方法： 使用 table (包括tbody、tr、td)标签，把子元素包裹在td内。
**注： ** css 中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，对inline-block类型的子元素有用。
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以不需要显式地设置。
弊端：加入了无意义的标签，不符合语义化。
<table>
<tr>
<td class="wrap">
<div>我是垂直居中的。</div>
</td>
</tr>
</table>
td.wrap{
background:#ddd;
height:200px;
}
div{
background:#aaa;
}
垂直居中
3.方法三
方法： 父元素的 display 设为table-cell，并且将vertical-align 设为middle 。
弊端：虽然没有添加多余的无意义的标签，但是兼容性不是很好，不兼容 IE6、7。而且修改display:table-cell，破坏了原有的块状元素的性质。
<div class="wrap">
<div>我是垂直居中的。</div>
</div>
div.wrap{
background:#ddd;
height:200px;
display:table-cell;
vertical-align:middle;
}
.wrap div{
background:#aaa;
}
效果同上
4. 方法四
方法： 为父元素设置 display:flex以及align-items:center
5. 方法五
适用于： 高度已知的元素
方法： 设置position:absolute以及top:50%，并将margin-top设置为 -1/2 的高度值。
三、水平垂直居中
可以适当结合水平居中与垂直居中的方法使用。下面是我比较常用的几个：
1.方法一
适用于： 高度和宽度已知的元素
<div class="wrap">
<div></div>
</div>
div.wrap{
background:#ddd;
height:200px;
position:relative;
}
.wrap div{
background:#aaa;
width:80px; // 已知
height:80px; // 已知
position:absolute;
top:50%;
left:50%;
margin-left:-40px; // -1/2 width
margin-top:-50px; // -1/2 height
}
水平垂直居中
2.方法二
方法： 父元素设置display:flex，要居中的子元素设置margin:auto；
3.方法三
/*父元素 CSS 设置为：*/
.parent{
display:flex;
align-items:center; /*垂直居中*/
justify-content:center; /*水平居中*/
}
PS:写的比较乱，还有很多方法没有写进来，如果了解了一些其他方法再更新吧，↖(ω)↗。
参考阅读：
1.使用弹性盒子进行高级布局.
2.CSS实现垂直居中的5种方法
网友评论