bootstrap文字居中、bootstrap4居中

在使用Bootstrap进行网页开发时，经常会遇到需要将文字或元素居中的情况。无论是水平居中还是垂直居中，Bootstrap都提供了简单而优雅的解决方案。如何使用Bootstrap 4实现文字和元素的居中对齐，并提供多种思路供参考。

开头简述解决方案

Bootstrap 4 提供了强大的实用工具类（utilities），可以帮助开发者轻松地实现文本和元素的居中对齐。对于简单的文本居中，可以使用text-center类；而对于更复杂的布局，如同时实现水平和垂直居中，则可以结合Flexbox工具类来完成。接下来我们将详细探讨几种常见的居中方法。

1. 文本水平居中

最简单的文本居中方式是使用Bootstrap内置的text-center类。这个类会将文本在其容器内水平居中显示。

html</p>

<div class="container">
  <div class="row">
    <div class="col text-center">
      <!-- 居中的文本 -->
      <p>这是一段居中的文本。</p>
    </div>
  </div>
</div>

<p>

上述代码中，text-center类作用于<div>元素，使得其中的文本自动居中。如果你只需要对特定的文本块应用居中效果，也可以直接将该类添加到具体的文本标签上，例如<p class="text-center">。

2. 水平居中一个块级元素

当需要居中的不仅仅是一段文本，而是一个块级元素（如按钮、图片等）时，可以使用mx-auto类，它代表左右外边距自动分配，从而实现水平居中。

html</p>

<div class="container">
  <div class="row">
    <div class="col">
      <!-- 使用 mx-auto 实现水平居中 -->
      <img src="example.jpg" alt="Example Image" class="mx-auto d-block" width="300">
    </div>
  </div>
</div>

<p>

注意这里还添加了d-block类，确保图像作为块级元素处理，以防止其默认的inline行为影响居中效果。

3. 使用Flexbox实现水平和垂直居中

如果要同时实现水平和垂直方向上的居中，那么使用Flexbox是最为推荐的方法。Bootstrap 4内置了丰富的Flexbox工具类，让这一操作变得异常简单。

html</p>

<div class="container d-flex align-items-center justify-content-center vh-100">
  <!-- 居中的内容 -->
  <div>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例页面。</p>
  </div>
</div>

<p>

在这段代码里：