如何使用 CSS 將 `` 元素在螢幕上居中？

如何定位

使用CSS 將元素置於螢幕中心

將

的位置集中放置無論螢幕解析度如何，網頁上的元素都需要仔細的CSS 樣式設定。目標是確保所有邊的間距相等：上、下、左、右。

方法1：固定尺寸的絕對定位

對於預定值的元素寬度和高度，最簡單的解決方案是絕對定位：

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

• 此方法將元素的位置設為螢幕高度和寬度的50%，並將其放置在中心。
• 元素高度和寬度一半的負邊距將其位置偏移正確的量，確保所有邊的間距相等。

範例：

<div>
<p><strong>方法2: CSS Transform 屬性</strong></p>
<p>方法2: CSS Transform 屬性</p>
<pre class="brush:php;toolbar:false">#divElement {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

，可以使用CSS變換屬性：
• 此方法對元素應用平移變換，在水平和垂直方向將其寬度和高度移動一半。

元素保持位於螢幕高度的 50%和寬度，但由於變換而正確偏移。

注意：
• 兩種方法都確保元素居中，不會隨頁面內容滾動。

建議使用現代瀏覽器以獲得與這些 CSS 的最佳相容性技術。