非已知高度的垂直对齐的条件
非已知高度的垂直对齐的条件：表格单元格
行内块（inline-block）
第一个比较好理解，第二个很多人可能会忽略。比如，很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法。记住，默认下图片就是属于inline-block，你只需简单的img {vertical-align:middle;}即可。
那么，我们进入主题。现在我们由于某些特殊需要两个并排的div想实现垂直居中。如前所述，div非表格，但是当代的浏览器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我们就用两种方式为当代浏览器实现非表格的垂直居中，殊途同归。
我们来重点分析CSS。如您所知，*property是一个只有IE（包括IE7）才能解析的hack. 那么为何是inline而不是inline-block呢？这跟IE的变态工作方式有关，具体不深究。在此你只需知道加上zoom:1后，就等价于inline-block。另外，如果是a, span等非block的元素，则按正常方式display:inline-block。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>未知高度，div垂直居中的一个跨浏览器方案</title>
<style type="text/css" media="screen">
#div1,#div2 {display:table-cell; *display:inline; zoom:1; vertical-align:middle;}
#div1 {color:red;}
#div2 {height:200px;border:1px dashed red;}
</style>
</head>
<body>
<div id="bd">
<div id="div1">blah blah...看见我居中了吗？</div>
<div id="div2"></div>
</div>
</body>
</html>
第二个未知高度居中：(转自：http://parandroid.com/css-content-with-achieving-the-vertical-center/)
在设计页面布局的时候，我们很可能需要到一些内容可以达到垂直居中。如果使用
<table>里面的valign属性，那很容易达到内容的垂直居中。但使用<table>
的缺点就是，你很可能就为了达到某些文本的垂直居中，就能弄一个烦人的表格框架。而现在，Verne为我们带为一个解决方法，纯CSS实现页面的垂直居中。
1.HTML代码<div id="container">
<div id="position">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
</div>
</div>
</div>2.CSS代码<STYLE type="text/css">
#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
</STYLE>这串CSS代码，几乎支持所有的浏览器。呃，但是除了IE，所以，需要对IE进行一个小小的Hack.
3.对IE的Hack#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
<!-->
<STYLE type="text/css">
#container { position: relative; }
#position { position: absolute; top: 50%; }
#content { position: relative; top: -50%; }
</STYLE>
<!-->你可以点击查看Demo或是下载示例。 在网上看到一个奇怪的上下居中效果。。和以往的不同。用了两div和增加有zoom属性。
页:
[1]