CSS 在 div 中垂直居中按钮

在本文中，我们将介绍如何使用 CSS 技术在一个 div 中将按钮垂直居中。垂直居中是网页设计中常见的需求，通过掌握以下几种方法，你将能够轻松地实现这一效果。

阅读更多：CSS 教程

方法一：使用 Flexbox

Flexbox 是一种 CSS 布局模型，它可以帮助我们轻松实现元素的弹性布局。通过设置父容器的 display 属性为 flex，并使用 align-items 属性进行垂直居中，我们可以将按钮垂直居中于父容器。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  /* 按钮样式 */
}

在上述示例中，我们首先创建了一个容器 div，并将其类名设为 container。然后，我们将 container 的 display 属性设置为 flex，这样容器内的子元素以弹性布局方式排列。接着，我们使用 align-items 属性将子元素（按钮）垂直居中于容器。

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

另一种常见的方法是使用绝对定位来实现按钮的垂直居中。通过将按钮的 position 属性设置为 absolute，并使用 top 属性以及负边距来将其垂直居中。

.container {
  position: relative;
}

.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 按钮样式 */
}

在上述示例中，我们首先创建了一个容器 div，并将其类名设为 container。然后，我们将 container 的 position 属性设置为 relative，这样子元素的绝对定位将基于容器。接着，我们将按钮的 position 设置为 absolute，使其脱离文档流，并使用 top: 50% 将其垂直居中。最后，我们使用 transform: translateY(-50%) 来调整按钮的位置，使其完美垂直居中。

方法三：使用表格布局

CSS 表格布局是一种强大的布局方法，它可以帮助我们轻松地实现元素的等高和垂直居中。通过将容器的 display 属性设置为 table，并将子元素的 display 属性设置为 table-cell，我们可以实现按钮的垂直居中。

.container {
  display: table;
}

.button {
  display: table-cell;
  vertical-align: middle;
  /* 按钮样式 */
}

在上述示例中，我们首先创建了一个容器 div，并将其类名设为 container。然后，我们将容器的 display 属性设置为 table，使其表现为一个表格。接着，我们将按钮的 display 属性设置为 table-cell，并使用 vertical-align: middle 来将其垂直居中。

方法四：使用 Grid 布局

CSS Grid 是一种更为灵活的布局方法，它可以在网页设计中实现复杂的布局需求。通过将父容器设为 grid 并在子元素上使用 align-self 属性，我们可以轻松实现按钮的垂直居中。

.container {
  display: grid;
  align-items: center;
  justify-content: center;
}

.button {
  align-self: center;
  /* 按钮样式 */
}

在上述示例中，我们首先创建了一个容器 div，并将其类名设为 container。然后，我们将容器的 display 属性设置为 grid，使其成为一个网格容器。接着，我们使用 align-items 属性将子元素垂直居中。最后，我们在按钮上使用 align-self 属性来调整按钮的位置，使其完美垂直居中。