flexbox divに何かを表示する方法

Question

flexbox divに何かを表示するには？ 私はコンテナを持っていて、このコンテナには、別のボックスboxA（フルスクリーン）があるところのboxBoxです。 Eveyrthingは機能していますが、私は単純に下にスクロールすることができますが、boxAの中央にdivを置くことはできません。不可能です。

.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>