垂直和水平居中 Bootstrap 4 - HTML

在Web开发中，许多设计要求元素在页面上垂直和水平居中。在Bootstrap 4中，有几种方法可以实现这一目标。

水平居中

1. 使用text-center

Bootstrap的text-center类可以将文本水平居中。要使用text-center，只需将其应用于父元素即可。

<div class="text-center">
  <h1>Hello World!</h1>
</div>

2. 使用mx-auto

Bootstrap 4的mx-auto类可以将元素水平居中。要使用mx-auto，只需将其应用于要居中的元素即可。

<div class="container">
  <img src="img/logo.png" class="mx-auto" alt="Logo">
</div>

3. 使用flex布局

使用Flexbox布局可以使元素水平和垂直居中。要使用Flexbox布局，请使用以下CSS样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将使所有子元素都垂直和水平居中。

垂直居中

1. 使用d-flex

Bootstrap的d-flex类可以创建Flexbox容器。将d-flex应用于父元素，然后使用align-items-center将其垂直居中。

<div class="d-flex align-items-center">
  <h1>Hello World!</h1>
</div>

2. 使用Flexbox布局

使用Flexbox布局可以使元素垂直和水平居中。如果要居中文本，只需在父元素上使用以下CSS样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 100%视口高度 */
}

要使用此方法使图像垂直居中，添加另一个父级容器，并将其高度设置为100vh。

<div class="outer">
  <div class="inner d-flex align-items-center">
    <img src="img/logo.png" alt="Logo">
  </div>
</div>

.outer {
  height: 100vh;
}

结论

在Bootstrap 4中，您有几种方法可以使元素垂直和水平居中。使用text-center和mx-auto类可轻松实现水平居中，并且通过Flexbox布局可以实现更高级的居中方式。