我们以一个面试题开始吧
请实现一个元素的水平居中显示，不少于3种方法
这道题看似貌似很简单，但是我们需要分析具体的场景，因为不同的显示方式的使用利弊是不一样的。
以下的讨论都是子元素相对于其父元素的水平居中。垂直居中，以后会说到。
行内元素的居中
常见的行内元素有span img等，对这些元素居中设置，只需要在父元素的css中添加text-align:center即可。同样它也对行内块元素也是有效的。
但是，有个缺点，由于text-align是可继承属性，即父元素内部的所有元素都会继承这个属性，从而它的子元素内部的文本都会居中显示了。因此需要对子元素的文本居中方式单独设定。
块级元素的居中
针对块级元素的居中，我们将分为定宽和不定宽两种情况来讨论。
1.定宽
（1）子元素是正常流布局
若子元素的宽度是已知的，那么我们可以设置子元素的左右margin为auto即可
<div class="parent">
<p class="child">我是子元素</p>
</div>
.parent{
width: 500px;
height: 100px;
background-color: #eee;
}
.child{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #82ab00;
}
行内块元素也算块级元素，同样适用
目前所有浏览器都是支持的
（2）子元素绝对定位布局(absolute)
如果子元素是绝对定位的，由于子元素此时是脱离文档流，上面的方法就失效了。这时需要明确指出子元素的定位，四个方位均要指定。如下：
.parent{
position: relative; /*要指定父元素为relative，你懂的*/
width: 500px;
height: 100px;
background-color: #eee;
}
.child{
position: absolute;
width: 100px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;
background-color: #82ab00;
}
这样也可以实现绝对定位元素的居中。原因可点击这里。如果绝对定位子元素的margin为auto，你会发现它水平垂直居中了！此方法仅适用于IE8+浏览器中，IE7就挂了，不过你可以下面这个方法：
.child{
position: relative;
width: 100px;
height: 50px;
left: 50%;
margin-left: -50px;
background-color: #82ab00;
}
2.不定宽
不定宽元素如果要居中需要额外的辅助手段
（1）css3新特性transform
如果你对浏览器并没有什么特别要求，那么可以使用css3提出的新属性transform完成居中需求
.child-4{
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #82ab00;
}
这里需要子元素是绝对定位
（2）借助table元素
上面定宽元素设定左右margin为auto之所以可以居中，原因是左右margin会平分父元素剩下的空间。有个元素除外，那就是tabel元素。table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中。
<div class="parent">
<table class="table-wrap">
<tbody>
<tr>
<td>
<div class="s-child">
我是子元素
</div>
</td>
</tr>
</tbody>
</table>
</div>
.table-wrap{
margin: 0 auto;
}
最大的缺点想必你也是知道，就是无关标签太多，加深了嵌套的层级，维护性很差。
（3）父元素使用float布局
这里需要多添加一层父元素，父子元素均float布局，之后设置position为relative，left为50%
<div class="parent-1">
<div class="parent-float">
<p class="child-float">我是子元素</p>
</div>
</div>
.parent-1{
width: 500px;
height: 100px;
margin-top: 50px;
background-color: #eee;
}
.parent-float{
float: left;
clear: both;
position: relative;
left:50%;
background-color: #999;
}
.child-float{
float: left;
position: relative;
left: -50%;
}
缺点是你需要额外处理浮动所带来的一些问题。并且如果你设置了背景色，布局会有些混乱
以上是我对元素实现居中的一些方法，欢迎大家补充。
2017.6.11 晴
于上海浦东
