bootstrap垂直居中怎么弄

Bootstrap 垂直居中技术

在使用 Bootstrap 框架时，经常需要将元素垂直居中。有两种主要方法可以实现这一目标：

1. flexbox 法

flexbox 是 Bootstrap 4 中引入的一种布局方式，它提供了更灵活的元素布局。要使用 flexbox 实现垂直居中，可以使用以下代码：

<div class="container">  <div class="row">    <div class="col-md-12">      <div class="d-flex justify-content-center align-items-center">        你的内容      </div>    </div>  </div></div>

在上面的代码中，d-flex 类使父元素成为一个 flexbox 容器，justify-content-center 和 align-items-center 类分别将元素水平和垂直居中在容器内。

2. align-items-center 类法

对于不支持 flexbox 的浏览器，可以使用 align-items-center 类。此类将元素垂直居中在父元素内，前提是父元素具有已定义的高度。

<div class="container">  <div class="row">    <div class="col-md-12" style="height: 100px;">      <div class="align-items-center">        你的内容      </div>    </div>  </div></div>

注意，在使用 align-items-center 类时，父元素必须具有已定义的高度。