html - Wordpress 的 Bootstrap 4 主题 - 垂直对齐不起作用

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 的 te 版本:

.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>