如何使用 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中文网其他相关文章！