html - 如何使div在行中居中

Question

我有一行从其父级继承的宽度为 1172px 的行。我已经在行内声明了一个 div，并且我想将其居中对齐。我尝试应用 margin: 0 auto 和 text-align:center 但不起作用。如何将其居中？

<div class="row">
    <div id="YelloBox" class="YelloBox"> 
    </div>                    
</div>

CSS:

.YelloBox {
    width: 515px;
    height: 602px;
    opacity: 0.3;
    background-color: #ffffff;
    background-color: var(--white);
    border: solid 1px #a28c77;
    border: solid 1px var(--reddish-grey);
    text-align: center;
    margin: 0 auto;
}

Answer 1

只需在CSS中添加display:table

.YelloBox {
    width: 515px;
    height: 602px;
    opacity: 0.3;
    background-color: #ffffff;
    background-color: var(--white);
    border: solid 1px #a28c77;
    border: solid 1px var(--reddish-grey);
    text-align: center;
    margin: 0 auto;
    display: table;
}