如何在flexbox布局容器中实现文本水平居中？

问题根因 #

你在.container上设置的flex相关属性，仅作用于容器的直接子元素（即.box1盒子本身），不会控制.box1内部的文本对齐逻辑。而vertical-align属性仅对行内元素、行内块元素、表格单元格生效，普通块级元素下添加该属性不会生效，这是你之前尝试失败的原因。

解决方法 #

两种常用方案按需选择：

• 方案1：将.box1也设为flex容器，可同时控制内部内容的水平、垂直对齐，适合内部有多种元素的场景
  修改后的.box1样式代码：

.box1 {
  background-color: aliceblue;
  height: 70%;
  width: 70%;
  display: flex;
  justify-content: center; /* 控制内部内容水平居中 */
  align-items: center; /* 控制内部内容垂直居中，不需要可删除 */
}

• 方案2：仅添加文本水平居中属性，适合.box1内只有纯文本的场景
  直接给.box1添加text-align属性即可：

.box1 {
  background-color: aliceblue;
  height: 70%;
  width: 70%;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者PanosG