CSS 实现 div 内文字垂直居中 | Flexbox 布局技巧

如何使用 Flexbox 实现 div 内文字垂直居中

假设你有一个 div 容器，其 CSS 样式如下：

.grid-item-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 15rpx;
  background-image: url('https://img.alicdn.com/imgextra/i1/752202202/O1CN01S9OqZl1S8Yw4n2GMx_!!752202202.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

现在你想在该 div 内放置另一个 div，并让里面的文字垂直居中。可以使用以下 CSS 样式实现：

.inner-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

通过设置 display: flex、justify-content: center 和 align-items: center，可以使 inner-div 成为一个 flex 容器，并在水平和垂直方向上居中对齐其子元素，包括里面的文字。同时，设置 height: 100% 可以确保 inner-div 占据父级容器的整个高度，从而实现文字在 div 内垂直居中的效果。

总结

使用 Flexbox 布局，可以轻松实现 div 内文字垂直居中，只需简单设置几个属性即可。希望这篇文章对您有所帮助。