css实现垂直居中的方法总结

未知宽高元素的垂直水平居中

第一种方法：组合使用display：table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display：inline-block即可）这在子元素不确定宽度和高度时，特别适用哦

咳咳，敲黑板划重点啦：
与其他一些display属性类似，table-cell同样会被其他一些css属性破坏，例如float，position：absolute，所以在使用display：table-cell时，尽量不要使用float或者position:absolute（可以考虑为之增加一个父div定义float等属性。）；设置了table-cell的元素对宽度和高度敏感（在父元素上设置table-row等属性，也会使其不感知height。），对margin值无反应，响应padding属性

嗯，下面是例子
<style> .father{width:400px; height:200px; border:1px solid #000;display:table-cell; text-align:center;vertical-align:middle;} .son{width:200px; height:100px; background:red;display:inline-block;}</style>

<div class="father">      <div class="son">         display:table-cell;</br>text-align:center;</br> vertical-align:middle      </div></div>对table-cell元素设置百分比（如100%）的宽高值是无效的，但是可以将元素设置display:table，再将父元素设置百分比跨高，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。嗯，看下面的代码<style>html,body{height:100%; margin:0;padding:0;}#box{display:table; width:100%;height:100%;}.father{width:400px; height:200px; border:1px solid #000;display:table-cell; text-align:center;vertical-align:middle;}.son{width:200px; height:100px; background:red;display:inline-block;}</style><div id="box"><div class="father"><div class="son">display:table-cell;</br>text-align:center;</br> vertical-align:middle</div></div></div>