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

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《如何实现 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 子元素多行文字垂直居中？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！