如何定位一個具有定義的寬度的div，並在另一個div的中心位置高度？

Question

我使用的引導，這裏是我的HTML代碼：

<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代碼是這樣的：

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

的問題是我想將這些div（class a，b，c，d）定位到每個類的中心（col-md-3）。任何人都可以幫我嗎？

Answer 1

使用自動利潤率可以水平居中元素：

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

您也可以實現居中水平和垂直方向上使用的父元素Flexbox的：

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