如何在高度未知的div中垂直居中文字？

Div 中的動態垂直文字對齊

在未知高度的 div 中實現垂直文字居中可能是一個挑戰。讓我們深入研究一個無論 div 尺寸如何都能確保一致對齊的解決方案。

此解決方案利用 display 屬性將包裝元素設定為表格。這允許我們在想要居中的元素中利用垂直對齊屬性。

示例代碼：

    <div>
        <h1 id="Text">Text</h1>
    </div>

body {width: 100%; height: 100%;}   /* This is just to "view" the div height... */

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

如何實現作用：

• position:absolute和height:100%屬性保證div覆蓋網頁的整個高度。
• 透過在div上設定display:table ，我們允許 h1 標籤上的 table-cell 屬性垂直對齊其內容。
• vertical-align: middle 屬性使 h1 標籤在 div 內垂直居中。這可以確保即使 div 大小發生變化，文字也保持居中。

此解決方案已在各種瀏覽器和作業系統上進行了測試，包括 Internet Explorer、Firefox、Chrome、Opera 和 Safari。它提供了一種簡單有效的方法，使文字在動態高度的 div 內垂直居中。

以上是如何在高度未知的div中垂直居中文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！