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

本文将介绍如何使用 Flexbox 实现 Div 内文字垂直居中。在 CSS 中，我们可以使用 Flexbox 来轻松地控制元素的位置和对齐方式。以下是如何实现 Div 内文字垂直居中的步骤：

1. **添加子元素:** 在 .grid-item-box 内添加一个子元素，例如一个 p 标签，用来存放文字内容。

2. **设置子元素的 display 属性:** 将子元素的 display 属性设置为 flex，这样它就会成为一个 Flexbox 容器。

3. **使用 align-items 和 justify-content 属性:** 使用 align-items 和 justify-content 属性分别设置为 center，可以使子元素中的文字内容在水平和垂直方向上都居中。

以下是一个示例代码:

**HTML:**

<div class="grid-item-box">
    <p>这里是文字</p>
</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%;
}

.grid-item-box p {
    display: flex;
    align-items: center;
    justify-content: center;
}

通过以上步骤，我们就成功地使用 Flexbox 实现 Div 内文字的垂直居中，使页面布局更加美观和整洁。