html - 如何在 flexbox div 上显示内容

Question

如何在 flexbox div 上显示内容？ 我有容器，在这个容器中是盒子 - bigBox，我有另一个盒子 - boxA(全屏)。一切正常，我可以简单地向下滚动，但我想把小 div 放在 boxA 的中心，这是不可能的。

.container {
        overflow: auto;
        width:100%;
        height:100%;
        display:flex;
    }
    
    .bigBox{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    
    .boxA {
        background: white;
        height: 100%;
        width: 100%;
    }

<div class = "container>
    <div class = "bigBox">
            
            <div class ="boxA"><center><img src="img.jpeg" style= "width: 100%; height: 100%;">
                </center>
            </div>
    <div class ="boxA"><center><img src="img.jpeg" style= "width: 100%; height: 100%;">
                </center>
            </div>
    </div>
    </div>

Answer 1

不要使用 center 标签，如果你想让图像居中，不要给它一个 100% 的 width 和 height .

.container {
        overflow: auto;
        width:100%;
        height:100%;
        display:flex;
    }
    
    .bigBox{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    
    .boxA {
        background: white;
        height: 50px;
        width: 100%;
    }

    img{
        display: block;
        margin: 0 auto;
        height: 100%;
    }

<div class = "container>
    <div class = "bigBox">
        <div class ="boxA">
            <img src="http://lorempixel.com/output/cats-q-c-700-700-9.jpg">
        </div>
        <div class ="boxA">
            <img src="http://lorempixel.com/output/cats-q-c-700-700-9.jpg">
        </div>
    </div>
    </div>