这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战
css 水平居中对齐是我们前端工程师必备的技能之一，也是面试时经常会被问到的问题之一，掌握这个小技能让你的面试过程少些小坑，闲言少叙，上正文。
本文共汇总了6种CSS实现水平或垂直居中的技巧：
1. line-height
使用场景：单行文字垂直居中
.example1{
width: 400px;
background: #afddf3;
line-height: 50px;
}
2. absolute + margin 负值
原理：设置绝对定位，top: 50%;后，再设置高度一半的负值实现。说来说去，这就是一道简单的数学题而已。无浏览器兼容性问题。
.example2 {
position: relative;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example2 .con {
position: absolute;
top: 50%;
height: 80px;
margin-top: -40px;
width: 300px;
font-size: 15px;
background: #afddf3;
}
3. absolute + translate
原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。
缺陷：translate是css3属性，低版本浏览器不支持。
优势：无需固定定位元素的宽高。
.example3 {
position: relative;
margin-top: 10px;
width: 400px;
height: 150px;
font-size: 0;
border: 1px solid #dcdcdc;
}
.example8 .con {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
background: #afddf3;
}
4. 块状元素的水平居中 margin：0 auto
使用方法：这种方法适用于块级元素的水平居中对齐，也是比较常用的方式。需要注意的是，这种方式必须设置一个宽度。
.example4{ width: 300px; margin: 0 auto; }
5. 弹性盒模型 Flex + align-items + justify-content
原理：弹性布局，align-items 垂直居中，justify-content水平居中 特点：css3属性，低版本浏览器不支持。无需固定定位元素的宽高，代码干净利索。
.example5 {
display: flex;
align-items: center;
justify-content: center;
}
6. 块状元素的水平居中（不定定宽）
原理： 在实际工作中，我们会遇到需要为“不定宽度的块级元素”设置居中，如网页上的分页导航，因为分页的数量是不确定的，所以，不能通过设置宽度来限制它的弹性。
可以直接给补丁款的块级元素设置text-align:center;来实现，也可以给父元素加text-align:center;来实现居中效果。
当不定宽块级元素的宽度不要占一行时，可以设置display为inline类型或inline-block（设置为行内元素显示或行内块元素）。
<div class="example6">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.example6 {
text-align: center;
background: beige;
}
.example6 ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
.example6 li {
margin-right: 8px;
display: inline-block;
}
结语：关于水平垂直对齐的实现方法还有很多，大家可以根据自己的理解去学习记忆，关于 line-height、margin:0 auto、flex、绝对定位 是工作中比较常用的方法，强烈建议大家务必要掌握。
