定義された幅と高さを持つdivを他のdivの中央に配置するにはどうすればよいですか？

Question

私は、ブートストラップを使用していますが、ここに私のHTMLコードです：問題がある

.a{ 
    background-image: url('a.jpg'); 
    width: 300px; 
    height: 300px; 
    margin-top: 5%; 
    border-radius: 10px; 
} 

：

<div class="row"> 
      <div class="col-md-3"> 
       <div class="a"> 
        <p>a</p> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="b"> 
        <p>b</p> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="c"> 
        <p>c</p> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="d"> 
        <p>d</p> 
       </div> 
      </div> 
    </div> 

そして、クラスごとに、a、b、c、dは、CSSのコードは次のようです私はこれらのdiv（クラスa、b、c、d）を各クラスの中心に配置したい（col-md-3）。誰か助けてくれますか？

Answer 1

あなたが水平に自動マージンを使用して要素をセンタリングすることができます

.a, .b, .c, .d { 
    margin: 0 auto; 
} 

ます。また、親要素をフレキシボックスを使用して水平方向にも垂直方向にもセンタリングを達成することができます

.col-md-3 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}