如何定位一个具有定义的宽度的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; 
}