如何在Bootstrap中设置垂直对齐

在垂直对齐工具的帮助下，可以改变元素的垂直对齐。垂直对齐工具只影响inline（在一行中出现）、inline-block（在一行中作为块出现）、inline-table和table cell（表格中的一个单元）元素。div的垂直对齐是响应式网页的最基本要求之一。这可以通过CSS来实现，但Bootstrap库有一些专门为此目的建立的类。在这篇文章中，我们将学习Bootstrap中用于垂直对齐的可用类和方法。关于其他垂直对齐类，请参考《Bootstrap中的垂直对齐及实例》。

在这里，我们将讨论2个内置类。

使用类align-items-center
使用类d-flex与类align-items-center的组合。

让我们通过例子来理解这两个类。

方法1：使用align-items-center类。

在Bootstrap 5中，如果我们想在垂直方向上将一个 <div>元素，我们可以通过在该div的包含元素上应用align-items-center类来做到这一点。

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
  </head>
 
  <body>
    <div class="container">
      <div
        class="row align-items-center bg-success text-light"
        style="min-height: 100vh">
        <div class="col-md-12">
          <h1>GeeksforGeeks</h1>
        </div>
      </div>
    </div>
  </body>
</html>

输出:

如何在Bootstrap中设置垂直对齐？

方法2：使用类d-flex与类align-items-center。

在Bootstrap 5中，如果我们想在垂直方向上对齐一个 <div>元素的中间，我们可以通过在该div的包含元素上应用align-items-center和d-flex类来实现这一点。在这里，d-flex类与CSS中的display: flex;属性具有相同的效果。

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
  </head>
 
  <body>
    <div class="d-flex align-items-center" style="min-height: 100vh">
      <div class="box w-100 text-success">
        <h1>GeeksforGeeks</h1>
      </div>
    </div>
  </body>
</html>

输出:

如何在Bootstrap中设置垂直对齐？