Как да позиционираме div с определена ширина и да се издигаме в центъра на друго div? [дубликат] - html, css

Аз съм с 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). Може ли някой да ми помогне?

Отговори:

можете да центрирате хоризонтално елемент, използващ автоматични маржове:

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

Можете да постигнете центриране както хоризонтално, така и вертикално, като използвате гъвкава клетка върху основните елементи:

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