居中 div，边距：0 自动； 不工作

Question

在搜索将我的 div 居中后，我能得到的只有 margin: 0 auto; 连同指定的宽度，但仍然无法正常工作。

我的问题只是将 div 居中。 我不知道为什么 margin: 0 auto; 不工作。

这是我的 CSS/html 的布局：

CSS

 .countdown-box { position: absolute; width: 80px; margin: 0 auto; height: 130px; /*left: 50%;*/ background: #008040; border-radius: 4px; z-index: 2; }

 <div class="countdown-box"></div>

Answer 1

这是因为您使用的是position: absolute; . 将其更改为position: relative; 它会起作用。

Answer 2

margin: auto适用于具有相对位置的元素。 以绝对位置居中应该像下面的 CSS：

 .countdown-box { position: absolute; background: #008040; border-radius: 4px; height: 130px; width: 80px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

 <div class="countdown-box"></div>

Answer 3

实际上 margin auto 会分配可用空间，这意味着它与它的相对与否没有任何关系。

<div class="centerize"></div>


.centerize {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: yellow;
}