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

【问题标题】：Bootstrap 4 theme for Wordpress - vertical align doesn't workWordpress 的 Bootstrap 4 主题 - 垂直对齐不起作用
【发布时间】：2018-10-08 14:26:46
【问题描述】：

我正在使用 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）这些解决方案都不起作用，我真的不知道为什么。这一切都与底部对齐。

【问题讨论】：

标签： html css wordpress bootstrap-4

【解决方案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>

【讨论】：