Question

我已经摆脱了堆叠器流动的潜伏，因为我正试图弄明白这一点。

我正在尝试使用＆＃34; display：flex＆＃34; ＆安培; ＆＃34;证明含量：中心＆＃34;以div为中心，但每当我尝试使用＆＃34;宽度：800px＆＃34;它使div的宽度为页面的100％。

任何人都可以推荐如何最好地设置我的div的宽度，同时也以它为中心？

＆＃13;

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%; }

＆＃13;

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

＆＃13;

Answer 1

中心A的宽度为100vh，这是个问题。我已经更新了以下代码。 justify-content以预期的方式工作。

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

你在哪里添加width属性？尝试将其添加到子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%; }

使用＆＃34; display：flex＆＃34;设置居中<div>的宽度＆安培; ＆＃34;证明含量：中心＆＃34;

2 个答案: