页面中心的 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>