绝对定位居中 Absolute Centering <div> <div> </div> </div> .Container { position: relative; } .Absolute-Center { position: absolute; width: 50%; height: 50%; overflow: auto; //防备内容越界溢出 margin: auto; top: 0; left: 0; bottom: 0; right: 0; }

长处：

兼容性好 Support IE8+

撑持百分比宽高

错误谬误：

必需声明高度

不适用Windows Phone

负边距 Negative Margins .is-Negative { position: absolute; width: 100px; height: 200px; padding: 10px; top: 50%; left: 50%; margin-left: -60px; //(width + padding)/2 margin-top: -110px; //(height + padding)/2 }

长处：

兼容性好 Support All Browser

错误谬误：

定宽高且不撑持百分比

表格单元 Table Cell <div> <div> <div> </div> </div> </div> .Container { display: table; } .Table-Cell { display: table-cell; vertical-align: middle; } .Child { width: 50%; margin: 0 auto; }

长处：

兼容性好 Support IE8+

不定宽高

错误谬误：

html层级多

移动 Transform:Translate .Transform-Translate { position: absolute; width: 50%; margin: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); }

长处：

不定宽高

错误谬误：

浏览器兼容性（适合移动端）

厂商前缀

可能与其他transform属性斗嘴

简介4种CSS实现程度垂直居中的要领及优错误谬误

，