以div为中心，边距：0自动；不工作

Question

在将div居中后，我所能得到的只是保证金：0 auto;加上指定的宽度，但仍然无法正常工作。

我的问题只是将div居中。我不知道为什么要保证金：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

边距：自动可用于具有相对位置的元素。以绝对位置居中应类似于以下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>