如何实现 CSS 子元素多行文字垂直居中？

css 子元素多行垂直居中

想要在子元素出现多行文字的情况下垂直居中，可以使用以下方法：

在父容器上添加 display: flex;，使其作为弹性容器。

在父容器上添加 align-items: center;，使其子元素在主轴上垂直居中。

立即学习“前端免费学习笔记（深入）”；

在子元素上添加 word-wrap: break-word;，允许子元素中的文字在单词之间换行。

示例代码：

.box {
  display: flex;
  align-items: center;
  height: 500px;
  border: 1px solid blue;
}

.box1 {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  word-wrap: break-word;
}

这样，即使子元素中的文字较多，也会在父容器中垂直居中显示。

以上就是如何实现 CSS 子元素多行文字垂直居中？的详细内容，更多请关注其它相关文章！