如何将具有定义宽度和高度的 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（类 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;
}