Bootstrap 垂直居中详解

小蓝 • 2024-11-18 19:59 • 编程

一、Flexbox 实现 Bootstrap 垂直居中

Bootstrap 的 flexbox 工具类可以让我们很方便地实现垂直居中，具体步骤如下：

<div class="d-flex align-items-center justify-content-center">
  <p>这是居中的文字</p>
</div>

实现方式很简单，直接在外层 <div> 元素上添加 d-flex 和 align-items-center 和 justify-content-center 两个 class 就可以实现垂直居中效果。

其中，d-flex 代表容器为 flex 布局；align-items-center 代表垂直方向上子元素居中对齐；justify-content-center 代表水平方向上子元素居中对齐。

除此之外，Bootstrap 还提供了许多与 flexbox 相关的工具类，例如栅格系统中的与 flexbox 结合使用的类名：justify-content-{breakpoint}-{value} 和 align-items-{breakpoint}-{value}。使用这些工具类可以轻松地实现各种垂直居中效果。

二、Table元素

除了使用 flexbox，我们还可以使用 table 元素来实现垂直居中，具体步骤如下：

<div class="d-table">
  <div class="d-table-cell align-middle">
    <p>这是居中的文字</p>
  </div>
</div>

其中，d-table 代表外层元素为 table 布局；d-table-cell 代表单元格；align-middle 代表单元格垂直居中对齐。

需要注意的是，这种方法虽然可行，但并不推荐使用。因为 table 元素不适合用于布局，会影响语义结构。

三、Translate + Position

如果你不想使用 flexbox 或者 table 元素来实现垂直居中，还可以使用 translate 和 position 属性来实现。具体步骤如下：

<div class="position-relative">
  <div class="position-absolute top-50 start-50 translate-middle">
    <p>这是居中的文字</p>
  </div>
</div>

其中，position-relative 代表相对定位，是为了让它的直属子元素 position-absolute 具有参照物；position-absolute 代表绝对定位；top-50 和 start-50 分别代表上下左右都为50%的距离；translate-middle 代表偏移的距离，为元素自身宽度和高度的一半。

需要注意的是，这种方法虽然可行，但是需要将每个要实现垂直居中的元素的父元素都设置为 position-relative，如果场景过于复杂，会影响代码的可读性。

四、垂直居中网格系统

Bootstrap 推荐的方式是使用垂直居中网格系统。

具体步骤如下：

<div class="container">
  <div class="row align-items-center">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
      <p>这是居中的文字</p>
    </div>
    <div class="col-sm-4">
    </div>
  </div>
</div>

其中，row align-items-center 中的 align-items-center 表示水平居中对齐，这个只针对单行元素有效，如果是多行元素，就需要再加上 text-center 的 class 来实现居中。

五、总结

通过以上几种方式，我们可以轻松地实现 Bootstrap 的垂直居中效果，其中以 flexbox 和垂直居中网格系统最为推荐。当然，对于场景比较特殊的情况，我们还可以使用其他方式来实现垂直居中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/157288.html