说到居中，好像每个前端人都能随口说出几个，像耳熟能详的margin:0 auto,传说中的line-heght之类的。但是，当天天面对各式各样的设计稿时，或许你知道的那几个法宝也不能应对了。
本文就日常重构中遇到的一些情景给出对应的解决方案，并对每种解决方案的优缺点进行简要概括。
垂直居中
-webkit-box- 居中
.wraper {
background: #DBE6BA;
height: 300px;
300px;
display: -webkit-box;
-webkit-box-align: center; // 水平居中
-webkit-box-pack: center; // 垂直居中
-webkit-box-orient: vertical;
}
</style>
<div class="wraper">
<span>我是文本我居中</span>
<span>我是文本我居中</span>
<span>我是文本我居中</span>
<span>我是文本我居中</span>
</div>
评价：适用于多行文本，缺点是只有-webkit内核浏览器支持，移动端可以多使用。
height | line-height 等值居中
.wraper {
background: #DBE6BA;
height: 90px;
line-height: 90px;
}
</style>
<div class="wraper">
<span>我是文本我居中</span>
<span>我是文本我居中</span>
<span>我是文本我居中</span>
<span>我是文本我居中</span>
</div>
评价：使用于单行文本(图片也可以)，缺点是要求父元素高度已知。
padding 居中
<style>
.wraper {
background: #DBE6BA;
padding: 25px;
560px;
}
</style>
<div class="wraper">
我是文本我居中
我是文本我居中
我是文本我居中
我是文本我居中
</div>
评价：只是看起来居中，其实是用padding撑满父元素而已，=。=。
table-cell 居中
<style type="text/css">
.inner {
display: table-cell;
vertical-align: middle;
}
.wraper {
display: table;
height: 80px;
background: #DBE6FD;
}
</style>
<div class="wraper">
<div class="inner">
我是文本我居中
我是文本我居中
</div>
</div>
评价：等于移动端用的较多，很适用。不过要注意的是他可能会破坏布局，要用display破坏原来的block属性。
absolute 居中
<style type="text/css">
.inner {
position: absolute;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
300px;
height: 100px;
}
.wraper {
400px;
height: 400px;
background: #DBE6FD;
position: relative;
}
</style>
<div class="wraper">
<div class="inner">
我是文本我居中
我是文本我居中
</div>
</div>
评价：要求父元素高度宽度都固定。
<style type="text/css">
.inner {
position: absolute;
height: 100px;
top: 50%;
margin-top: -50px:
}
.wraper {
400px;
height: 400px;
background: #DBE6FD;
position: relative;
}
</style>
<div class="wraper">
<div class="inner">
我是文本我居中
我是文本我居中
</div>
</div>
评价：要求需要居中的元素高度已知。
对于span，img等行内元素，使用vertical-align: middle。
<style>
p {
background: #DBE6FD;
height: 100px;
}
img {
vertical-align: middle;
}
</style>
<p>
<img align="absmiddle" src="qq.png" alt="qq">
我是图片后的文字，我要居中
</p>
图片和文本要图片居中，可以使用<img src=”” align=”absmiddle” />
<style>
p {
background: #DBE6FD;
text-align: center;
}
</style>
<p>
<img align="absmiddle" src="qq.png" alt="qq">
我是图片后的文字，我要居中
</p>
水平居中
text-align 居中
<style>
p {
background: #DBE6FD;
text-align: center;
}
</style>
<p>
<span>我要水平居中！</span>
</p>
评价： 限于文本和图片等内联元素。
margin: 0 auto; 居中
<style>
.outer {
background: #DBE6FD;
}
.inner {
background: #F3F3F3;
80%;
margin: 0 auto;
}
</style>
<div class="outer">
<div class="inner">
<p>我是内容我居中</p>
<p>我是内容我居中</p>
<p>我是内容我居中</p>
<p>我是内容我居中</p>
</div>
</div>
评价：只对于块级元素有效。
absolute
.outer {
background: #DBE6FD;
position: relative;
}
.inner {
background: #F3F3F3;
position: relative;
left: 50%;
400px;
margin-left: -200px;
}
</style>
<div class="outer">
<div class="inner">
<p>我是内容我居中</p>
<p>我是内容我居中</p>
<p>我是内容我居中</p>
<p>我是内容我居中</p>
</div>
</div>
评价：只对宽度已知的元素有效。
总结：以上每种方法都有自己的优点和缺点，对于特定场景，选用适合此场景的方法即可。
补充
box-flex：布局的垂直等高、水平均分、按比例划分。
.wraper {
display: box;
}
.sectionOne {
box-flex: 3;
}
.sectionTwo {
box-flex: 2;
}
.sectionThree {
box-flex: 1;
}
</style>
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>
说明：
父元素必须为display:box（此时容器定义为内联元素，使用margin：0 auto无效，要在父元素上使用text-aglin:center.）
如果其中一个子元素设置了固定宽度，该子元素直接应用设置的宽度，其他的在按比例平分剩下的。
box属性：
box-orient box-direction(排列顺序，reverse|normal)
box-align（父容器里面子容器的垂直对齐方式 start | end | center | baseline | stretch）
box-pack(子容器的水平对齐方式 start | end | center | justify)