2

我使用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;

（我在这里的评论中找到了该解决方案）

为什么？

4

3 回答 3

4

好的，请耐心等待……这整件事与视觉格式化模型有关，特别是与计算宽度和边距的方式有关。

有几件事需要考虑，比如display和position（都可以在 CSS 规范的第 10.3 节中看到）。

特别是对于您的情况，我们正在谈论绝对定位的非替换元素（因为它不是图像或任何具有固有大小的东西），所以它是第10.3.7 节绝对定位的非替换元素。

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

如果定义了 left/right ，而不是 auto，则适用以下规则：

如果 'margin-left' 和 'margin-right' 都是 'auto'，请在两个边距获得相等值的额外约束下求解方程 (...)

如果 left/right 没有定义，所以它们默认为auto，以下规则适用：

第一的：

将 'margin-left' 和 'margin-right' 的 'auto' 值设置为 0 (...)

第二：

如果建立包含静态位置的块的元素的“direction”属性是“ltr”，则将“left”设置为静态位置，否则将“right”设置为静态位置。然后求解'left'（如果'direction'是'rtl'）或'right'（如果'direction'是'ltr'）。

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

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

希望能帮助到你！

于 2012-07-17T19:03:37.953 回答
1

“对于绝对定位的元素，top、right、bottom和 left属性指定元素包含块边缘的偏移量（元素相对于什么定位）。然后元素的边距定位在这些偏移量内。”

来源：MDN

这就是它起作用的原因 - 通过设置left和right属性，您可以将元素的偏移量拉伸为 100%。在 100% 的宽度内，margin: auto一切正常。

于 2012-07-17T18:34:17.643 回答
-1

It's a bit unexpected to see "absolute" (which is used when you want to control the position of the element on the site) and then "auto". Nevertheless, you might have a good reason for doing that. I'd suggest that since you're using the style

position: absolute;

you could center it by specifying the style

left: 50%;
margin-left: -40px;

under the assumption that your component is 80 pixels wide.

于 2012-07-17T18:21:56.090 回答