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

如何在子元素含有多行文字的情况下实现垂直居中？

在 HTML/CSS 中，要使子元素在包含多行文字的情况下垂直居中，可以使用 align-items: center; 属性和 word-break: break-all; 属性。

解决步骤：

• 使用 align-items: center; 属性将子元素垂直居中。
• 使用 word-break: break-all; 属性允许字母和数字换行，从而避免文字超出子元素的范围。

示例代码：

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