标签：float 高度 无法 contain items 居中 play middle 并且
元素居中，是前端工作者一个老生常谈的话题，网上相关的资料很多，不同的人有不同的理解（不排除有直接copy的），这里我从实际项目需求出发，经过多次试验和总结，得出以下几种居中方法供大家试用并指正：
1. 单纯只是水平居中：
(1)元素宽度已知的情况下，假设为200px，可以采用定位+负的外边距，代码如下：
.container{position:relative} .box{position:absolute;left:50%; margin-left:-100px;}
(2)元素宽度未知或者无法直接读取，可以采用文本居中，代码如下：
.container{text-align:center} .box{display:inline-block}
(3)如果是水平居中一个浮动元素，需要在元素外层以及容器中间套一层div，代码如下：
.box-wrap{float:left;position:relative;left:50%} .box{float:left;position:relative;left:-50%}
注意：上述的.box-wrap并不是起始的外层父元素，而是重新生成的一层嵌套元素，另外.box的left:-50%可以换成right:50%
2. 单纯只是垂直居中：
(1)元素高度已知的情况下，与上述元素宽度已知的情况类似，也是采用定位+负的外边距（只是将left换成了top）
(2)元素高度未知或者无法直接读取，可以采用文本居中，代码如下：
.container{height:500px;line-height:500px} .box{display:inline-box;vertical-align:middle}
(3)元素高度未知或者无法直接读取，也可以采用在要居中的元素之前设置一个空的行内标签，假设为<span>，代码如下：
span{display:inline-block;width:0;height:100%;vertical-align:middle} .box{display:inline-block;vertical-align:middle}
3. 同时满足水平和垂直方向的居中：
(1)元素宽度和高度已知的情况下，采用定位+负的外边距
(2)元素宽度和高度未知或者无法直接读取，并且没有浮动，可以采用flex布局，给父元素设置了display:flex后，目标子元素直接就是margin:auto
(3)对于浮动元素，也可以采用flex布局，代码如下：
.container{display:flex} .box{justify-content:center;align-items:center}
注意：flex布局在低版本的ie中不适用，但是实现居中效果最为高效和便捷；
网上有人用到table和table-cell的布局方法，同样可以实现居中，但我不提倡，原因两点：一是涉及到三层嵌套，二是使用table重在表格展示，而不是网页布局
标签：float 高度 无法 contain items 居中 play middle 并且
原文地址：http://www.cnblogs.com/brandonhulala/p/5998573.html
