如何僅使用 CSS 將 Div 元素完美地置於螢幕中央？

定位

;使用純CSS 在螢幕中心完美實現元素

在本文中，我們將解決將

居中的常見挑戰。 （或 ）元素，不論螢幕大小。目標是將剩餘空間均勻分佈在各個方向。具體方法如下：

使用絕對定位

如果元素具有固定的寬度和高度，絕對定位是最直接的方法：

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

本例：

• position:absolute將元素從普通文件中取出流。
• top: 50% 將元素的頂部位置設定為視窗的中心。
• left: 50% 將元素的左側位置設定為視窗的中心。
• margin-top: -50px 和 margin-left: -50px 用於調整其在範圍內的位置viewport。

注意：始終避免內聯樣式，因為它們會造成維護問題並阻礙程式碼可重用性。

這是JSFiddle 上的一個工作範例：http:// /jsfiddle.net/S5bKq/.

透過執行以下步驟，您可以有效地居中任何

或網頁上的元素，無論螢幕大小如何，都能確保具有視覺吸引力的佈局。

以上是如何僅使用 CSS 將 Div 元素完美地置於螢幕中央？的詳細內容。更多資訊請關注PHP中文網其他相關文章！