尺寸未知的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中文網其他相關文章！
