尺寸未知的 Div 垂直对齐方式
在 CSS 中，当 div 大小未知时，动态调整 div 的垂直对齐方式可能会很困难。这里有一个解决这个问题的解决方案：
CSS解决方案
这个纯CSS解决方案采用vertical-align: middle在一个具有固定行高的较大div中：
<code class="css">#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}</code>说明
#center div 位于其父级的中心，top: 50% 和 margin-top 调整以占其高度的一半。巨大的行高确保其中的文本内容（在本例中为子 div #wrap）保留在底部。
在 #center 内，#wrap 包含垂直对齐的图像：middle，无论图像大小如何，都能确保垂直对齐。
警告
唯一有警告的浏览器是 IE7。为此，内部 div #wrap 和图像必须位于同一行：
<code class="html"><span id="center"> <span id="wrap"><img src="..." alt="" /></span> </span></code>
以上是如何在 CSS 中垂直对齐具有未知尺寸的 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！
