Тема Bootstrap 4 для Wordpress - вертикальное выравнивание не работает

Question

Я использую Understrap (Bootstrap 4 + Wordpress), и ни один из способов вертикального центрирования div, показанных здесь в других обсуждениях, не работает для меня.

У меня есть этот HTML:

<div class="jumbotron vertical-center">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-12">Test</div>
<div class="col-lg-2 col-md-12">Test</div>
<div class="col-lg-2 col-md-12">Test</div>
<div class="col-lg-2 col-md-12">Test</div>
<div class="col-lg-3 col-md-12">Test</div>
</div>
</div>
</div>

А это css:

.vertical-center {
  min-height: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
}

html	{
	height: 100%;
}

body	{
	height: 100%;
}

Я также пробовал версию с отредактированным css:

.vertical-center  {
vertical-align: middle;
display: inline-block;
float: none;
}

(попытался назначить этот специальный класс как jumbotron, так и каждому div) Ни одно из этих решений не работает, и я не знаю почему. Это все выровнено по дну.

Answer 1

Вы можете использовать метод position: absolute; для вертикального центрирования элемента:

body {
  position: relative;
  min-height: 100vh;
}

.vertical-center {
  position: absolute;
  top: 50%;
  left: 0; /*set this to 50% if you want to also  horizontally center the element */
  transform: translate(-50%, -50%);
}

<div class="jumbotron vertical-center">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-12">Test</div>
      <div class="col-lg-2 col-md-12">Test</div>
      <div class="col-lg-2 col-md-12">Test</div>
      <div class="col-lg-2 col-md-12">Test</div>
      <div class="col-lg-3 col-md-12">Test</div>
    </div>
  </div>
</div>