用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。
一、使用自动外边距实现居中
CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin- left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：
Div+CSS布局居中
div#container {
margin-left: auto;
margin-right: auto;
168px;
}
在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式（compliance mode）下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要确保用户的IE浏览器版本不低于6.0。
尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。
二、使用text-align实现居中
另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。
之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：
Div+CSS布局居中
body{
text-align:center;
}
之后会出现什么问题吗？body的所有子孙元素都会被居中显示。
因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：
Div+CSS布局居中
p {
text-align:left;
}
可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。
三、组合使用自动外边距和文本对齐
因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：
Div+CSS布局居中
body {
text-align: center;
}
Div+CSS布局居中
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
168px;
text-align: left
}
可是这始终是个hack，无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。
四、负外边距解决方案
负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。
下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。
然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。
Div+CSS布局居中
#container {
background: #ffc url(52css.jpg) repeat-y center;
position: absolute;
left: 50%;
760px;
margin-left: -380px;
}
看，没有任何hack！虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广—甚至在Netscape Navigator 4.x中都没有任何问题，很令人吃惊，不是吗？所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。
垂直居中方法大集合
时间:2009-02-12 20:56来源:网络 作者:秩名 点击: 15次
1. 单行文字在固定高度容器中垂直居中
这个最简单，只要让行间距 line-height 与容器高度 height 相等即可；
1. #box { height: 120px; line-height: 120px; overflow: hidden }
2. 多行文字在未知高度容器中垂直居中
这个也很简单，将 padding-top 与 padding-bottom 设置成相同的值即可；
1. #box2 { padding: 10px 0 }
3. 多行文字在固定高度容器中垂直居中（非 IE 浏览器）
1. #box3_wrapper {
2. display: table;
3. height: 311px;
4. background: #eee
5. }
6. #box3 {
7. display: table-cell;
8. vertical-align: middle
9. }
Html代码 复制代码
1. <div id="box3_wrapper">
2. <div id="box3">
3. 作者：shimano<br />
4. 如何既给用户提供最大限度的编辑权限<br />
5. 又能保证网页整体的规范和美观？<br />
6. 真 TMD 难啊！
7. <div>
8. </div>
注意：这其中有个关于字号的问题，在 XP 和 Vista 及 Mac 下即使设定了像素为单位的字号，文字大小也依旧不同，这个在我之前一个篇日志里也提到过，在 XP 下，12px 宋体是 11x11(px)的，在 Vista 下有些文字高 11px 有些高 12px，这也是为什么 Vista 下的宋体看起来比较奇怪，Mac 下默认就是平滑边缘的黑体，再有就是 safari 下平滑边缘的宋体，所以更不容易辨别。
如果细究，在不设定高度和行间距的容器中，12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距，XP 的 IE6 下，字下沿有 3px ，字上沿为 0；Firefox 下，字上沿为 1px，下沿为2px；Vista 下，文字上下各 1px 间距（考虑同等高度文字）；这可以理解为默认 line-height，在 这篇日志 中我也是遇到了同样的问题。
关于 IE6 下 line-height 的问题我在 这篇日志 中有提。
4. 多行文字在固定高度容器中垂直居中（IE 浏览器）
因为 IE 不支持将 div 显示为 table 及其同胞，所以我们要另想办法：
Css代码
1. #box3_wrapper {
2. position: relative;
3. }
4. #box3_inner {
5. position: absolute;
6. top: 50%
7. }
8. #box3 {
9. position: relative;
10. top: -50%;
11. background: #eee
12. }
Html代码
1. <div id="box3_wrapper">
2. <div id="box3_inner">
3. <div id="box3">
4. 这种方法<br />
5. 在下面的未知高度 div 垂直居中<br />
6. 也用到了
7. </div>
8. </div>
9. </div>
下面有个权衡 IE 与 非 IE 浏览器浏览效果的实现方法，请继续看
5. 未知高度 div 的垂直居中
Css代码 复制代码
1. #box4_wrapper {
2. height: 100%;
3. 100%;
4. overflow: hidden;
5. position: relative
6. }
7. #box4_wrapper[id] {
8. display: table;
9. position: static
10. }
11. #box4_outer {
12. position: absolute;
13. top: 50%
14. }
15. #box4_outer[id] {
16. display: table-cell;
17. vertical-align: middle;
18. position: static
19. }
20. #box4_inner {
21. position: relative;
22. top: -50%;
23. margin: 0 auto;
24. background: #eee
25. }
Html代码
1. <div id="box4_wrapper">
2. <div id="box4_outer">
3. <div id="box4_inner">
4. 这是一种无 hack 的方式<br />
5. 虽然环保，但是臃肿:(
6. </div>
7. </div>
8. </div>
CSS2 选择符 #value[id] 相当于 #value，但是 IE 不支持这种类型的选择符，使用这种方式区分浏览器避免 hack:)
6. 未知尺寸图片（小与容器高度）在固定高度容器中垂直居中
1. #box5 {
2. display: table-cell;
3. *display: block;
4. *font-size: 175px;
5. *font-family: Arial;
6. vertical-align: middle;
7. height: 200px;
8. 200px
9. }
10. #box5 img {
11. vertical-align: middle
12. }
Html代码 复制代码
1. <div id="box5">
2. <img src="img/ctba.png" alt="扯谈社" />
3. </div>
<div id="box5">
<img src="img/ctba.png" alt="扯谈社" />
</div>
淘宝 UED 07 前端开发原题。解释下针对 IE 的 hack：在 IE 下，将字号设置为容器高度的 0.873（本例中即 200*0.873 = 175）图片便会垂直居中；字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题，如 gbk 编码（摘自译飞的博客）
当然如果只是图片，在针对非 IE 浏览器时利用单行文字的垂直居中方法也可以。