如何在另一个div的中心定位具有定义宽度和高度的div？

Question

我正在使用bootstrap，这是我的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（类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;
}