Question

我试图将红色“倒计时”div水平居中，但这不是我的方式。已经被困了几个小时但还没有找到一个解决方案。

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;}

Answer 1

删除你的“位置：绝对;”从倒计时。无法在绝对定位的元素上计算边距。

Answer 2

固定here！

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

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

Answer 3

div的问题是

position:absolute;

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

属性。

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

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

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

希望这有帮助!!!

Answer 4

如果您将代码更改为：

#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是'auto'，因此它们的值等于'0'。 Position:absolute打破了典型内容流中的块，呈现其余内容，就好像该块不存在一样。设置top:0; left:0; bottom:0; right:0;会为浏览器提供一个新的边界框。

为块提供宽度和高度可防止块占用所有可用空间并强制浏览器根据新的边界框计算margin:auto。因此：绝对定位元素的边距然后定位在这些偏移内。由于块是绝对定位的，因此不在正常流程中，因此浏览器会给margin-left和margin-right提供相等的值，并将元素置于先前设置的边界中。

希望这有帮助

保证金：自动似乎无法运作，无法解决问题

4 个答案: