Как центрировать по вертикале элементы в Bootstrap 5?

Question

[Morrowind]

Привет!
Я тут уже и так и сяк попробовал, но не получается у меня найти ответ.

Мне нужно вертикально центрировать 3 кнопки. Так что бы это не съезжало каждый раз при разном разрешении.
Горизонтально получилось с горем пополам.

Прошу подскажите решение. Желательно пример.
Мой пример того что я сверстал сам ниже.

<div class="container">
        <div class="col-12 mb-5"></div>
            
                <!-- надпись 1-->
            <div class="row justify-content-center">
                <div class="col-auto mb-3">
                    button type="button" class="btn btn-warning">Кнопка1</button>
                </div>
            </div>

              <!-- надпись 2-->
            <div class="row justify-content-center">
                <div class="col-auto">             
                  button type="button" class="btn btn-warning">Кнопка3</button>                    
                </div>
            </div>

              <!-- надпись3 -->
            <div class="row justify-content-center">
                <div class="col-auto">
                    <button type="button" class="btn btn-warning">Кнопка3</button>
                </div>
            </div>
    </div>

Answer 1

[Боб Семович]

За вертикальное центрирование отвечает в бутстрапе класс .align-items-center (вот ссылка на эту инфу на русском)

Важно!
У вас вёрстка по бутстрапу сделана не правильно. Нужно так:

<div class="container">
	<div class="row justify-content-center align-items-center">

		<!-- надпись 1-->
		<div class="col-auto mb-3">
			<button type="button" class="btn btn-warning">Кнопка1</button>
		</div>
		<!-- надпись 2-->
		<div class="col-auto mb-3">
			<button type="button" class="btn btn-warning">Кнопка2</button>
		</div>
		<!-- надпись 3-->
		<div class="col-auto mb-3">
			<button type="button" class="btn btn-warning">Кнопка3</button>
		</div>
	</div>
</div>

.row используется только для обёртки .col-auto/col-md-4...

Comments

[Morrowind]

К сожалению Align items не взлетает. Я пробовал.

Так же как и Ваш пример который оставили. Кнопки просто упираются в потолок и все. Ни какой центровки кроме горизонтальной.

[Боб Семович]

Morrowind, Потому что блоку .row нужно задать в css height: 100%.

[Morrowind]

Comrues, Спасибо получилось. Но к css нужно указать height: 100vh; % - не работает.

[Боб Семович]

Morrowind, Не за что. 100vh это 100% высоты экрана. Лучше использовать что-то более относительное. 100% не получилось, скорее всего потому, что блок .row упирается в другой родительский блок и ему тоже нужно задать 100%