定義された幅とdivでdivを配置する方法は、別のdivの中心に？ [複製] - html、css

私はブートストラップを使用しています。私の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）の中央に配置することです。誰か助けてくれますか？

回答：

自動余白を使用して要素を水平方向に配置することができます。

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

親要素のflexboxを使用して、水平方向と垂直方向の両方のセンタリングを行うこともできます。

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