css 子元素多行垂直居中

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

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

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

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

在子元素上添加 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;
}

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