Как отцентрировать контент внутри блока bootstrap?

Как отцентрировать контент внутри блока bootstrap, что не так делаю? Почему justify-content: center не помогает. Вопрос к второй колонке.

.card-delivery {
  border: none;
  background-color: #fff;
  padding: 1rem;
}

.card-delivery .card-icon {
  width: 96px;
}

.card-delivery .card-title {
  color: #435586;
}
<link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
    crossorigin="anonymous"
/>

<div class="row">
    <div class="col-lg-8">
        <div class="row">
            <div class="col-lg-6 mt-4">
                <div class="card card-delivery h-100">
                    <div class="card-body">
                        <div class="card-icon">
                            <img alt="Кто доставит?" src="img/why_delivery.svg" class="img-fluid" />
                        </div>
                        <h4 class="card-title">Кто доставит?</h4>
                        <p>Мы доверяем доставку зеркал нашим партнерам — транспортной компании «Стекловозов».</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mt-4">
                <div class="card card-delivery h-100">
                    <div class="card-body">
                        <div class="card-icon">
                            <img alt="Как узнать, что заказ готов?" src="img/where_delivery.svg" class="img-fluid" />
                        </div>
                        <h4 class="card-title">Куда могут привезти?</h4>
                        <p>
                            Доставка осуществляется по всей Москве и Московской области на специализированном
                            транспорте.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col mt-4">
                <div class="card card-delivery h-100">
                    <div class="card-body">
                        <div class="card-icon">
                            <img alt="В какие дни можно" src="img/why_delivery.svg" class="img-fluid" />
                        </div>
                        <h4 class="card-title">В какие дни можно ждать доставку?</h4>
                        <p>
                            Доставка осуществляется круглосуточно, 7 дней в неделю, включая выходные и праздничные дни.
                            Возможен заказ доставка в назначнный час, вплоть до ±15 минут. Воспользуйтесь этой услугой у
                            проверенного партнера. С тарифами можно ознакомиться здесь.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mt-4">
        <div class="card-delivery justify-content-center h-100">
            <div class="card-body">
                <div class="card-icon">
                    <img alt="Узнать цены" src="img/why_price.svg" class="img-fluid" />
                </div>
                <h4 class="card-title">Узнать цены на доставку можно <a href="#">тут</a></h4>
            </div>
        </div>
    </div>
</div>


Ответы (1 шт):

Автор решения: highpassion

Если Вы хотите отцентрировать во второй колонке элемент .card-body по вертикали, то вам нужно свойство align-items со значением center, а если по горизонтали, вы выбрали правильное свойство justify-content, однако в обоих случаях вам нужно добавить display: flex; для элемента .card-delivery, иначе эти свойства просто не сработают.

→ Ссылка