margin:auto 似乎不起作用，无法弄清楚

Posted 2023-03-06

【中文标题】margin:auto 似乎不起作用，无法弄清楚

【英文标题】：margin:auto doesn't seem to work, can't figure it out

【发布时间】：2014-07-28 07:59:53

【问题描述】：

我正在尝试将红色“倒计时”div 水平居中，但它不符合我的要求。已经卡了几个小时，但还没有找到单一的解决方案。

http://jsfiddle.net/737tM/

html：

<div id="container">

  <div id="countdownWrapper">
    <div id="countdown">

    </div>
  </div>

</div>

CSS：

body 
margin:0;
background:black;
overflow: hidden;

#container 
height:100%;
width:100%;
z-index:-900;
position:fixed;
min-width:500px;

#countdownWrapper 
width:100%;
height:100px;
bottom:0;
position:absolute;
display:block;

#countdown 
margin-left:auto;
margin-right:auto;
display:block;
width:400px;
height:100px;
background-color: rgba(0, 0, 0, 0.5);
position:absolute;
z-index:1000;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background:red;

【问题讨论】：

边距不能很好地与绝对定位的元素配合使用。你这样定位它有什么原因吗？我没有看到任何右、左、上或下规则。

是的，直到我将#countdown 放入#countdownWrapper 之前，这是一个原因。只是忘了从 #countdown 中删除 position:absolute ，而是将该值分配给父级。问题还是解决了，感谢您的快速反馈！

@user3716760 只是一个说明，边距可以在绝对定位元素中计算，但是当你这样做时，边距将相对于绝对定位元素的 div left 和 top 属性。请检查我的答案。

【参考方案1】：

删除您的“位置：绝对；”从倒计时。不能对绝对定位的元素计算边距。

【讨论】：

-1，您的部分答案解决了问题，而其他部分则不正确！可以在绝对位置元素中计算边距，请查看我的答案。

【参考方案2】：

如果您将代码更改为：

#countdown 
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:400px;
    height:100px;
    background-color: rgba(0, 0, 0, 0.5);
    position:absolute;
    z-index:1000;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background:red;
    top: 0; left: 0; bottom: 0; right: 0;

它会起作用的。原因是在正常的内容流中，margin: auto 等于顶部和底部的“0”，在您的情况下，margin-left 和 margin-right 是“自动”，因此它们的值等于“0”。 Position:absolute 将块从典型的内容流中分离出来，呈现其余内容，就好像该块不存在一样。设置top:0; left:0; bottom:0; right:0; 为浏览器提供了一个新的块边界框。

为块指定宽度和高度可防止块占用所有可用空间并强制浏览器根据新边界框计算margin:auto。因此：绝对定位元素的边距然后定位在这些偏移量内。由于块是绝对定位的，因此超出了正常流程，浏览器会为 margin-left 和 margin-right 赋予相同的值，使元素在之前设置的边界中居中。

希望对你有帮助

【参考方案3】：

已修复here！

问题出在绝对位置，可以在绝对定位的元素中计算边距，但是当你这样做时，边距是相对于它们的位置，由 left 和 top 属性定义。因为您希望它与包装器相关，所以您需要从倒计时 div 中删除绝对定位。就是这样。

#countdown 
    margin: 0 auto;
    display:block;
    ...

【参考方案4】：

你的问题是

position:absolute;

您已在名为 countdown 的元素上应用的属性。

如果您只删除此属性，您的中心边距将正常工作。

此外，与标记为正确答案的答案相反，边距确实适用于绝对定位的元素。但是，与静态定位元素相比，绝对定位元素的边距工作方式不同。

您需要了解定位的工作原理。 Chris Coyier 的文章当然是一个好的开始 -> http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/.

希望对你有帮助！！！