如何在 Bootstrap col 中垂直居中

在 Bootstrap 中，要在 col 中实现垂直居中并不难。以下是几种可以使用的方法：

1. 使用 flexbox

通过使用 flexbox 的 align-items: center 属性，可以让元素在垂直方向上居中对齐。

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      <!-- 垂直居中的内容 -->
    </div>
  </div>
</div>

2. 使用 padding 和 inline-block

通过给 col 添加上下方向上的 padding，然后将内容包裹在一个 display: inline-block 的元素中，可以实现垂直居中。

<div class="container">
  <div class="row">
    <div class="col d-flex align-items-center">
      <div class="center-element">
        <!-- 垂直居中的内容 -->
      </div>
    </div>
  </div>
</div>

<style>
.center-element {
  display: inline-block;
}
</style>

3. 使用表格布局

通过将 col 的内容包裹在一个 d-table 元素中，并将内容对齐到表格的中间，可以实现垂直居中。

<div class="container">
  <div class="row">
    <div class="col d-table">
      <div class="d-table-cell align-middle">
        <!-- 垂直居中的内容 -->
      </div>
    </div>
  </div>
</div>

<style>
.d-table {
  display: table;
}
.d-table-cell {
  display: table-cell;
}
.align-middle {
  vertical-align: middle;
}
</style>

这些方法中的任何一种都可以让你在 col 中实现内容的垂直居中。选择适合自己项目需求的方法即可。