如何使用 CSS 將固定位置的 Div 置中？

將固定位置 div 居中

使用固定位置 div 時，將它們與頁面中心對齊可能是一個挑戰。用於絕對定位元素的傳統「hack」並不適用。相反，div 的最左邊的角被放置在 50%，忽略 margin-left。

使用 CSS3 變換的解決方案

解決方案在於使用 CSS3 變換屬性：

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

此方法使用 Transform屬性將元素向左移動其寬度的一半，從而有效地將其居中於

獎勵：絕對定位的元素居中

對於絕對定位的元素，比margin-left “hack”更好的方法是使用CSS3 Flexbox：

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

這會將絕對定位元素的內容與

範例

這裡有一個範例來示範差異：

<div class="almost-centered">I'm almost centered DIV lorem ipmsum</div>

<div class="centered">I'm exactly centered DIV using CSS3</div>

「幾乎居中」div 使用margin-left「 hack”，而“centered”div 使用CSS3 變換屬性。正如您所看到的，「居中」div 準確地位於中心。

以上是如何使用 CSS 將固定位置的 Div 置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！