盘点八种CSS实现垂直居中水平居中的绝对定位居中技术
日期：2014-05-16 浏览次数：20603 次
Ⅰ.绝对定位居中(Absolute Centering)技术
我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
我不是这种实现方法的第一人，可能这只是非常常见的一种小技术，我斗胆将其命名为绝对居中(Absolute Centering)，虽然如此，但是大多数讨论垂直居中的文章却从来不提这种方法，直到我最近浏览《How to Center Anything WithCSS》这篇文章的评论时候才发现这种用法。在评论列表中Simon和Priit都提及了此方法。
如果你有任何扩展的功能或建议，可以在此跟帖：
CodePenSmashingMagazine
Twitter @shshaw
优点：
1.支持跨浏览器，包括IE8-IE10.
2.无需其他特殊标记，CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
6.内容块可以被重绘。
7.完美支持图片居中。
缺点：
1.必须声明高度（查看可变高度Variable Height）。
2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。
3.在Windows Phone设备上不起作用。
浏览器兼容性：
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。
对比表格：
绝对居中法并不是唯一的实现方法，实现垂直居中还有些其他的方法，并各有各的优势。采用哪种技术取决于你的浏览器是否支持和你使用的语言标记。这个对照表有助于你根据自己的需求做出正确的选择。
|
Technique |
Browser Support |
Responsive |
Overflow |
resize:both |
Variable Height |
Major Caveats |
|
Absolute Centering |
Modern & IE8+ |
Yes |
Scroll, can overflow container |
Yes |
Yes* |
|
