居中一直是css里比较关键的一个概念，在多数情况下居中往往有许多种方法。
水平居中
行内元素居中： text-align：center;
块级元素居中：
-
margin：0 auto；//这种方法前提必须是要为元素设置宽度，否则宽度拉伸为父级的宽度，无法实现居中效果。 - 利用绝对定位的“子绝父相”法，给父元素设置相对定位，子元素设置绝对定位和transform：
.container {
position:relative;
}
.item {
position:absolute;
left:50%;
transform:translate(-50%);
}
- 利用flex实现居中:
这里列举一种常见的方式，具体请参考上篇文章： CSS中的布局详解（三）
.container {
display:flex;
justify-content:center;
}
垂直居中
行内元素垂直居中：
- 单行行内或文本元素，可以设置等值的padding的top值和bottom值：
padding-top:10px;
padding-bottom:10px;
- 还有最常用的，让行高line-height和height值相等：
height:50px;
line-height:50px;
- vertical-align属性，但这个属性需要设置一个类似table-cell的父级容器：
display: table-cell;
vertical-align: middle;
块级元素：
- 在已知元素高度的情况下，可以利用定位来实现居中：
.container {
position:relative;
}
.item {
position: absolute;
top: 50%;
height:100px;
margin-top: -50px;
}
- 在未知元素高度的情况下，首先需要定位到容器的中心，然后再使用transform和translate属性：
.container {
position:relative;
}
.item {
position: absolute;
top:50%;
transform: translateY(-50%);
}
- 利用flex实现垂直居中：
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center; //加上这条属性，就是水平和垂直居中
}
参考资料：
我的个人博客：http://chronosblog.top
我的微信公众号：runtustory
CSS布局详解系列索引：
