CSS 如何垂直居中一个bootstrap类按钮

在本文中，我们将介绍如何使用CSS将一个bootstrap类按钮垂直居中。

阅读更多：CSS 教程

方法一：使用Flexbox布局

Flexbox布局是一种强大的CSS布局技术，可以轻松实现垂直居中效果。首先，我们需要创建一个包含按钮的父容器，并将其设置为Flex布局：

<div class="container">
  <button class="btn btn-primary">按钮</button>
</div>

接下来，我们将使用以下CSS样式将父容器设置为Flex布局并实现垂直居中：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 父容器的高度 */
}

在上面的代码中，align-items: center将子元素在垂直方向上居中对齐，justify-content: center将子元素在水平方向上居中对齐。

这样，我们就成功地将bootstrap类按钮垂直居中了。

方法二：使用绝对定位和负边距

如果您不想使用Flexbox布局，您还可以使用绝对定位和负边距来实现垂直居中效果。

首先，我们需要创建一个包含按钮的父容器，并将其设置为相对定位：

<div class="container">
  <button class="btn btn-primary">按钮</button>
</div>

接下来，我们将使用以下CSS样式将按钮设置为绝对定位并将其居中：

.container {
  position: relative;
  height: 100vh; /* 父容器的高度 */
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的代码中，top: 50%将按钮的顶部位置设置为父容器的50%处，left: 50%将按钮的左侧位置设置为父容器的50%处。然后，transform: translate(-50%, -50%)将按钮向左和向上移动到其自身宽度和高度的一半，从而实现垂直和水平居中。

这样，我们也成功地将bootstrap类按钮垂直居中了。

方法三：使用表格布局

表格布局是CSS中实现垂直居中的另一种方法。首先，我们需要创建一个包含按钮的父容器，并将其设置为表格布局：

<div class="container">
  <button class="btn btn-primary">按钮</button>
</div>

接下来，我们将使用以下CSS样式将父容器设置为表格布局并实现垂直居中：

.container {
  display: table;
  height: 100vh; /* 父容器的高度 */
  width: 100%; /* 根据需要设置宽度 */
}

.btn {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

在上面的代码中，display: table将父容器设置为表格布局，display: table-cell将按钮设置为表格单元格。然后，vertical-align: middle将按钮在垂直方向上居中对齐。

这样，我们同样成功地将bootstrap类按钮垂直居中了。