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

將元素放置在瀏覽器視窗的中心

將Web 元素精確放置在瀏覽器視窗的中間可能是一個常見的要求瀏覽器窗口，無論其大小或其他因素如何。這可以使用 CSS 定位屬性來實現。

解決方案：

為了使元素在瀏覽器視窗中居中，我們採用以下方法CSS:

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

解釋：

• 位置：絕對；從正常流中刪除元素，允許其定位準確地說。
• 頂部：50%；將元素的頂部定位在距瀏覽器視窗頂部 50% 的位置。
• Left: 50%; 將元素的左邊緣定位在距瀏覽器視窗左邊緣50% 的位置.
• 變換：translate(-50 %,-50%);調整元素的位置以在水平和垂直方向上有效偏移50%。這將使元素在其原始區域內居中。

透過組合這些屬性，我們可以實現瀏覽器視窗中任何 HTML 元素的精確居中，無論其大小或佈局如何。

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