html - 为什么我必须将 left 和 right 设置为 0 才能使控件水平居中？

Question

我使用的 CSS 如下:

.center
{
    width: 30%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
    right:0;
    left:0;
}

没有

是行不通的

right:0;
left:0;

(我在评论中找到了解决方案 here )

为什么？

Answer 1

好吧，请耐心等待...这整件事都与 Visual formatting model 有关，特别是宽度和边距的计算方式。

有几件事需要考虑，比如display 和position(都可以在section 10.3 of the CSS spec 上看到)。

特别是对于您的情况，我们正在谈论绝对定位的非替换元素(因为它不是图像或任何具有固有大小的东西)，所以它是 10.3.7 Absolutely positioned, non-replaced elements 部分.

根据你的CSS，你有一个定义的宽度，所以不是auto，你的左边距和右边距都是auto。所以它归结为左/右值是什么:

如果定义了左/右，则不是自动，则适用以下规则:

If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values (...)

如果未定义左/右，则它们默认为自动，则适用以下规则:

首先:

set 'auto' values for 'margin-left' and 'margin-right' to 0 (...)

第二个:

if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').

所以你可以看到，如果你没有为左/右定义一个特定的值，你的边距实际上变成了 0 并且你最终将 div 放在了左边或右边容器取决于 direction 属性的值(你可以通过在你的 css 上放置类似 html { direction:rtl; } 的东西来测试它，div 应该在右边当左/右是自动时而不是左)

但是，如果您确实指定了值，在您的情况下为 0，“两个边距获得相等的值”有效地将元素居中。

希望对您有所帮助!