CSS定高多行垂直居中
新客网 XKER.COM 2008-10-07 来源： 收藏本文
用Table布局可以很容易的实现文字和图片的垂直居中，但是在div的布局中呢，要实现定高容器里面的内容的垂直居中不是太简单的事情。
在DOM标准中
在IE中
综合
#boxOuter
{
display:table;
height:300px;
width:500px;
border:solid 1px black;
*position:relative;
}
#box
{
display:table-cell;
vertical-align:middle;
*position:absolute;
top:50%;
width:100%;
}
#boxInner
{
*position:relative;
width:100%;
top:-50%;
}
<div id="boxOuter">
<div id="box">
<div id="boxInner">
<p>Some Content Here</p>
<p>Some Content Here</p>
<p>Some Content Here</p>
<p>Some Content Here</p>
<p>Some Content Here</p>
</div>
</div>
</div>
在DOM标准中
在IE中
综合
#boxOuter
{
display:table;
height:300px;
width:500px;
border:solid 1px black;
*position:relative;
}
#box
{
display:table-cell;
vertical-align:middle;
*position:absolute;
top:50%;
width:100%;
}
#boxInner
{
*position:relative;
width:100%;
top:-50%;
}
<div id="boxOuter">
<div id="box">
<div id="boxInner">
<p>Some Content Here</p>
<p>Some Content Here</p>
<p>Some Content Here</p>
<p>Some Content Here</p>
<p>Some Content Here</p>
</div>
</div>
</div>
最新相关文章发表评论
评论内容：不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。
【重要声明】：新客网刊载此文仅为提供更多信息的目的，并不代表新客网同意文章的说法或描述，也不构成任何建议，对本文有任何异议，请在上面提出建议。