BootStrap - 将一个div元素垂直居中的方法在本教程中，我们将通过实例来学习如何在BootStrap中把一个d

在本教程中，我们将通过实例来学习如何在BootStrap中把一个div元素垂直居中。

考虑一下，我们在BootStrap中拥有以下的div元素。

<div>
  <h1>Hello, User</h1>
</div>

要在BootStrap中使div垂直居中，请在div元素的d-flex 和align-items-center 属性中添加utlity类class 。

"align-items-center "使div垂直居中。

下面是一个例子。

<div class="d-flex align-items-center" style="100vh">
  <h1>Hello, User</h1>
</div>

注意：上述实用类使用的是flexbox，可以在BootStrap 4，和5版本上工作。

如果你使用的是低于4的Bootstrap版本，那么你可以使用自定义CSS类来添加flexbox。

<div class="center-v">
  <h1>Hello, User</h1>
</div>

.center-h{
    display: flex;
    align-items: center;
    height: 100vh;
}

使用绝对位置使div垂直居中

我们可以使用bootstrap中的css绝对定位来使一个div垂直居中。

下面是一个例子。

<div class="center-v">
     <h1>Hello, User</h1>
</div>

.center-v{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}