作者：电脑信息网日期：
返回目录：设置问题
如果垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素
参考下列HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<style>
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
}
#div {
background: blue;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 240px;
margin: -120px 0 0 -120px;
}
--></style>
</head>
<body>
<div id="div">
i'm Mr. zzllrr.
</div>
</body>
</html>
如果居中元素高度可变，这就需要额外的一个wrapper元素，e79fa5e98193e4b893e5b19e330用table-cell的方式来模拟表格的居中实现
具体请参考下列代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<style>
<!--
html, body {
height: 100%;
margin: 0 auto;
padding: 0;
}
body {
position: relative;
display: table;
}
#wrapper {
display: table-cell;
vertical-align: middle;
text-align: middle;
}
#div {
background: blue;
color: #fff;
}
* html #wrapper, *+html #wrapper {
position: absolute;
top: 50%;
}
* html #div, *+html #div {
position: relative;
top: -50%;
}
--></style>
</head>
<body>
<div id="wrapper">
<div id="div">
i'm Mr. zzllrr.
i'm Mr. zzllrr.
i'm Mr. zzllrr.
</div>
</div>
</body>
</html>
div里没有上下居中的属性
如果是单个图片或单行文字的垂直居中，可以用line-height或padding来调整。
如果是多行内容居中，可以考虑用js
三、多行文本固定zhidao高度的居中
在本文的一开始，我们已经说过CSS 中的vertical-align 属性只会对拥有valign
特性的(X)HTML 标签起作用，但是在版CSS 中还有一个display 属性能权够模拟
，所以我们可以使用这个属性来让
好象是CSS里的line-height定义吧？ 或者设置一个高度，用magin来解决好了！