div中实现垂直方向居中
<br />实现目标：<br />1）div容器的高度固定。<br />2）内部需要居中对齐的内容高度不固定，例如服务器动态产生的数据。<br />3）不使用表格。<br /> <br /> <br /> <br /><!DOCCTYPE html PUBULIC "-//W3C//DTD XTHML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
实现目标：
1）div容器的高度固定。
2）内部需要居中对齐的内容高度不固定，例如服务器动态产生的数据。
3）不使用表格。
<!DOCCTYPE html PUBULIC "-//W3C//DTD XTHML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div垂直方向居中</title>
<style>
#outer {
height:100px;
overflow:hidden;
position:relative;
}
#outer[id] {
display:table;
position:static;
}
#middle {
position:absolate;
top:50%;
} //for ie only
#middle[id] {
display:table-cell;
vertical-align:middle;
position:static;
}
#inner {
position:relative;
top:-50%;
}//for ie only
/*optional:#inner[id] {position:static;}*/
#withBorder {
border:1px green solid;
}
</style>
</head>
<body>
<div id="outer" class="withBorder">
<div id="middle">
<div id="inner">
这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
这里是内容这里是内容这里是内容这里是内容；
</div>
</div>
</div>
</body>
</html>
该页面的效果，浏览器窗口的宽度变化、文字折行都不会影响文字的竖直居中效果。
这种方法需要使用嵌套的3层div才可以实现。如果读者需要使用这种方法，只需要将相应的高度换成需要的高度，其余的结构和css样式都不用修改，直接使用即可。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)