页面中心的CSS div和内容的宽度

Question

我有一个div的CSS：

.modal-dialog {
    margin: 30px auto;
}

它把它放在页面的中心，我的宽度设置为800px的固定宽度，但我想改变它所以它的内容的宽度（不是页面的宽度）

我尝试将宽度设置为100%，我也尝试设置min-width:800px;，但这两个都只是将div设置为整页宽度

如何让这个div保持在页面的中心，只是它内容的宽度

Answer 1

在容器上使用以下内容：

    .modal-dialog {   
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: fit-content;
        margin: auto;
        outline: 2px dashed red;
    }
    .content {
      width: 50vw; 
      height: 50vh;
      background-color: blue;
      }

<div class="modal-dialog">
<div class="content"></div>
</div>

Answer 2

我相信这应该有用。

.modal-dialog {
    margin-left:auto;
    margin-right:auto;
    width:auto;
}

这会将你的div放在中心，并使div与其内容一样宽。