February 23rd, 2006
CSS实现垂直居中的问题
Category: CSS, Author: Nicky, Popularity: 8%看了CSS实现完美垂直居中这篇文章，文中提到的第四种方法和Vertical Centering in CSS这篇文章提到的方法原理一致，这确实是完美解决垂直居中问题的一个方法。但是本文的作者还特别强调那是他个人原创，引用一下他的原文：
我研究 IE layout 模式多年，还是找出了一个可以在IE中绝对居中的方法。这个方法就是基于IE layout的BUG，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行。
既然研究IE的布局都研究了多年，那么我相信了他的实力。但是在二楼我又发现一个“拍砖贴”，点击到它提到的Vertical Centering in CSS文中，也找到了这样一句话“I have found it going home on Wilson street.”，说明老外认为这个是他的原创，而且他还特别申明了原创时的时间和地点，虽然我们无从考证他走在威尔逊大道上是否在想这个问题，但是按文章发布的时间来判断，老外的要早一些，那么这个就变得有趣了。
讨论完原创问题再来研究一下它的原理，按照老外的文章加上我的简单翻译来说明这个方法。
它是利用IE错误的解释了使用百分比计算定位高度的BUG来达到目的。
先定义一个高度400px的DIV，使用相对定位，它的CSS为:
position: relative;
overflow: hidden;
background-color:#09C
在里面放一层DIV，使用绝对定位，让它离上面有50%的距离，它的CSS为:
top: 50%;
那么我们再在里面嵌套一个DIV，它的CSS为:
top: -50%;
height:40px;
意思就是向上移动“它”一半的高度，但是IE就错误的解释了“它”的高度，计数的高度采用了它内部嵌套内容的高度，但是像这样正好是垂直居中。搞懂了相对定位和绝对定位的道理这个就不难理解了。
如果要使用在IE和Mozilla浏览器中都能完美居中有多种hack方法，作者使用了在需要IE解释的属性前加下划线方法。（display: table是为支持display: table属性的浏览器准备的，它可以得到和使用表格一模一样的效果，也就是vertical-align: middle属性起作用了）
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<div style=" _position: relative; _top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
我们还可以使用更好的结构化语句来达到目的，道理是一样的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative; background-color:#09C}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>
<title>Vertical Centering in CSS</title>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
ps:如果遇到图片和文字并排，可以试试给图片一个float:left; vertical-align: middle;属性。
Tags：CSS.
评论数量(10) | Add Comments
本文网址：http://www.osxcn.com/css/vertical-centering.html
一向是多嵌套个div, 里面的设padding, 里外同时定义height. 总之有很多”手段”能实现. 而他的方法据”目测”后我认为tahoma与verdana下都会有微小的偏差.
他说的东西似乎并没有多少技术含量, 感觉我这样烂的水平他也不比我好多少. 如果说分享经验那很好, 但这么的自吹自擂太令人反感了.
哎，网上这样的人多得去了，知道就好拉……
对了，Nicky，我的Blog链接怎么没见转过来呀？：（
没学过CSS，看着脑袋疼
怎么不记得自己发过评论了? 我确实是用里面padding-top来实现, 但两种方法意义不同, 百分比是自动判断的…
使整个内容绝对垂直居中是有很多办法，不过使用padding-top还是需要对容器绝对定位来配合，top: 50%;left: 50%;应该是不可少的。如果IE也支持display: table-cell属性就不存在垂直居中的问题了。
我看了这帖子之后 以为真的有好的垂直居中的办法,没想到一试_____我靠 大叠眼睛 根本不行! 本人认为何必这么固执呢?不能垂直居中就不要用嘛!
有另外解决的办法,外部容器不那么大不就行了吗?大不了,多整几个div.
以后我再也不去寻找居中的方法了!郁闷css样式表3什么出来解决了这个鸟问题啊
嵌套了2个div，已经背离了表现型与内容相分离了，脱离了xhtml产生的初衷了
漏了left，水平居中要加_left:50% _left:-50%
不错不错，是个强人。学习
建议发表一些flex上的css文章，现在这类东西太少了