二月 23rd, 2006
CSS实现垂直居中的问题
Category: CSS, Author: Nicky, Popularity: 8%
看了CSS实现完美垂直居中这篇文章，文中提到的第四种方法和Vertical Centering in CSS这篇文章提到的方法原理一致，这确实是完美解决垂直居中问题的一个方法。但是本文的作者还特别强调那是他个人原创，引用一下他的原文：
在里面放一层DIV，使用绝对定位，让它离上面有50%的距离，它的CSS为:
那么我们再在里面嵌套一个DIV，它的CSS为:
意思就是向上移动“它”一半的高度，但是IE就错误的解释了“它”的高度，计数的高度采用了它内部嵌套内容的高度，但是像这样正好是垂直居中。搞懂了相对定位和绝对定位的道理这个就不难理解了。
如果要使用在IE和Mozilla浏览器中都能完美居中有多种hack方法，作者使用了在需要IE解释的属性前加下划线方法。（display: table是为支持display: table属性的浏览器准备的，它可以得到和使用表格一模一样的效果，也就是vertical-align: middle属性起作用了）
我们还可以使用更好的结构化语句来达到目的，道理是一样的。
预览效果 原文地址
ps:如果遇到图片和文字并排，可以试试给图片一个
我研究 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为:
height: 400px;
position: relative;
overflow: hidden;
background-color:#09C
position: relative;
overflow: hidden;
background-color:#09C
position: absolute;
top: 50%;
top: 50%;
position: relative;
top: -50%;
height:40px;
top: -50%;
height:40px;
<div style="display: table; height: 400px; _position: relative; overflow: hidden; background-color:#09C">
<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>
<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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
<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>
float:left; vertical-align: middle;属性。 Tags：CSS.
评论数量(10) | Add Comments
本文网址：http://www.osxcn.com/css/vertical-centering.html
LEMONed Says:
2006-02-23 6:05 下午
FinalFantasy Says:
2006-02-23 7:54 下午
conan Says:
2006-02-23 8:36 下午
Nicky Says:
2006-03-04 3:10 下午
奥特曼 Says:
2006-06-21 6:07 下午
greensea Says:
2006-07-08 1:09 下午
munn Says:
2006-08-24 7:30 下午
小C Says:
2008-02-29 3:56 下午
ortem Says:
2008-04-28 9:26 上午
