css实现垂直居中

iteye_21028

于 2008-12-15 13:53:01 发布

阅读量77

点赞数

分类专栏： css 文章标签： CSS XHTML 浏览器 HTML

css 专栏收录该内容

38 篇文章

订阅专栏

如果是用table写的表格，那么用vertical-align:middle就可以实现垂直居中

如果是用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">
*{padding:0;margin:0;}
#container { width: 500px; height: 600px; display: table; border:1px solid;}
#position { display: table-cell; vertical-align: middle; text-align: center; }
#container { *position: relative; }
#position { *position: absolute; *top: 50%; }
#content { *position: relative; *top: -50%; }
</style>
</head>
<div id="container">
	<div id="position">
		<div id="content">这里是要垂直居中的内容</div>
	</div>
</div>
</html>

hack写法：在属性前加“*”或者“#”的声明可以仅让IE7及以下版本理解，而其它任何浏览器都无法理解这个”*”和“#”。