Question

我使用的是Understrap（Bootstrap 4 + Wordpress），其他讨论中显示的垂直居中div的方式都不适用于我。

我有这个HTML：

＆＃13;

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

＆＃13;

这个css：

＆＃13;

.vertical-center {
  min-height: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
}

html	{
	height: 100%;
}

body	{
	height: 100%;
}

＆＃13;

我也尝试过编辑过的css版本：

＆＃13;

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

＆＃13;

＆＃13; （尝试将此特殊类分配给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>

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

1 个答案: