Ako umiestniť div s definovanou šírkou a vystúpiť v strede inej div? [duplicitné] - html, css

Používam bootstrap a tu je môj HTML kód:

    <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 pre každú triedu, a, b, c, d, je kód CSS takýto:

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

Problém je, že chcem umiestniť tieto div (triedy a, b, c, d) do stredu každej triedy (col-md-3). Mohol by mi niekto pomôcť?

odpovede:

môžete vodorovne vycentrovať prvok pomocou automatických okrajov:

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

Rovnako môžete dosiahnuť vystredenie horizontálne aj vertikálne pomocou flexbox na nadradených prvkoch:

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