HTML Bootstrap 将 div 居中对齐

在本文中，我们将介绍如何使用 HTML 和 Bootstrap 将 div 居中对齐。居中对齐是页面设计中常见的要求之一，通过使用 Bootstrap 的类和 CSS 属性，我们可以轻松地实现这个效果。

阅读更多：HTML 教程

使用 Bootstrap 的居中对齐类

Bootstrap 提供了一些实用的类来帮助我们在页面上将元素居中对齐。以下是一些常用的类：

d-flex：该类用于创建一个 flex 容器。
justify-content-center：该类用于水平居中 flex 容器中的内容。
align-items-center：该类用于垂直居中 flex 容器中的内容。

下面是一个示例代码，演示如何使用 Bootstrap 类将 div 居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <title>Center Align Div with Bootstrap</title>
  <style>
    .container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="jumbotron">
      <h1 class="display-4">Hello, World!</h1>
      <p class="lead">This is an example of center aligning a div using Bootstrap.</p>
    </div>
  </div>
</body>
</html>

在上面的例子中，我们使用了名为 container 的 div 来包含要居中对齐的内容。container div 使用了 Bootstrap 的居中对齐类，将其内部的内容水平和垂直居中。

使用 CSS 属性实现居中对齐

除了使用 Bootstrap 类来实现居中对齐，我们还可以使用 CSS 属性来实现相同的效果。以下是一些常用的居中对齐属性：

display: flex;：此属性将元素设置为 flex 容器。
justify-content: center;：此属性将 flex 容器的内容水平居中对齐。
align-items: center;：此属性将 flex 容器的内容垂直居中对齐。
text-align: center;：此属性将文本内容水平居中对齐。

下面是一个示例代码，演示如何使用 CSS 属性将 div 居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
  <title>Center Align Div with CSS</title>
</head>
<body>
  <div class="container">
    <div>
      <h1>Hello, World!</h1>
      <p>This is an example of center aligning a div using CSS properties.</p>
    </div>
  </div>
</body>
</html>

在上面的例子中，我们使用了相同的 container div 和居中对齐属性，将其内部的内容水平和垂直居中。

总结

在本文中，我们介绍了如何使用 HTML 和 Bootstrap 或 CSS 属性将 div 居中对齐。通过使用 Bootstrap 提供的居中对齐类或 CSS 属性，我们可以轻松地实现这一效果。居中对齐是页面设计中常见的要求之一，掌握这些技巧将帮助我们创建出更加美观和易读的页面布局。希望本文对您有所帮助！