使用 "display:flex" & "justify-content:center" 设置居中 <div> 的宽度

Question

我已经摆脱了 stackeroverflow 的潜伏，因为我正在绞尽脑汁想弄清楚这个问题。

我正在尝试使用 "display:flex" 和 "justify-content:center" 使 div 居中，但每当我尝试使用 "width:800px" 时，它都会使 [=30] 的宽度=] 100% 的页面。

任何人都可以推荐如何最好地设置我的 div 的宽度同时将其居中吗？

body {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            background-color:black; }
    
    h1 {
            line-height:87%;
            color:yellow; }
    
    .page {
            display:block;
            z-index:1;
            height:100%;
            width:100%; }
    
    .centerA
            {
            position:relative;
            z-index:2;
            top: 5%;
            display:flex;
            justify-content:center;
            min-width:100vh; }
    
    .center {
            z-index:3;
            position:relative;
            text-align:center;
            top: 5%;
            background-color:black;
            border-style:solid;
            border-width:1px;
            border-color:orange;
            font-size:250%; }

<html> 
<div class="page">
            <div class="centerA">
                <div class="center">
                    <h1> This is a test page
                    </h1>
                </div>
            </div>
    </div>
    
    
    </html>

Answer 1

中心 A 的宽度为 100vh，这是问题所在。我已经更新了下面的代码。证明内容按预期方式工作。

body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: -moz-none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        background-color:black; }

h1 {
        line-height:87%;
        color:yellow; }

.page {
        display:block;
        z-index:1;
        height:100%;
        width:100%; }

.centerA
        {
        position:relative;
        z-index:2;
        top: 5%;
        display:flex;
        justify-content:center;
        }

.center {
        z-index:3;
        position:relative;
        text-align:center;
        top: 5%;
        width: 200px;
        background-color:black;
        border-style:solid;
        border-width:1px;
        border-color:orange;
        font-size:250%; }

<html> 
<style>



</style>





<div class="page">
        <div class="centerA">
            <div class="center">
                <h1> This is a test page
                </h1>
            </div>
        </div>
</div>


</html>

Answer 2

你在哪里添加宽度属性？尝试将其添加到 child div（中心）

.center {
    z-index:3;
    position:relative;
    text-align:center;
    top: 5%;
    width: 800px; //also you could use flex-basis:800px for more flexbox approach
    background-color:black;
    border-style:solid;
    border-width:1px;
    border-color:orange;
    font-size:250%; }

使用 "display:flex" & "justify-content:center" 设置居中 <div> 的宽度

Setting width of centered <div> using "display:flex" & "justify-content:center"

html

set

width