如何使用 CSS 將 HTML 元素在瀏覽器視窗中置中？

在瀏覽器視窗中將元素居中

當目標是將HTML 元素精確定位在瀏覽器視窗範圍內的中間時，忽略其尺寸，瀏覽器工具列佈局和螢幕分辨率，需要一種特定的方法。

解決方案涉及使用CSS的position:absolute屬性，它將分離正常文件流中的元素，並允許將其放置在精確的座標處。此外，將頂部和左側設為 50% 會將元素定位在視窗內垂直和水平方向的中間點。

要將元素從該初始位置偏移回其視覺中心，需要使用 Transform 屬性翻譯（-50%，-50%）。這確保了即使在調整其錨點（頂部和左側）後，元素仍保持居中。

以下是實現所需效果的對應CSS 程式碼：

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

透過實作透過這段程式碼，HTML 元素可以精確地定位在瀏覽器視窗的中心，而不受任何外在因素的影響。

以上是如何使用 CSS 將 HTML 元素在瀏覽器視窗中置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！