Flex布局求助：列内元素无法实现居中对齐

我需要将列中的元素居中对齐，但实际运行后第二列的内容并未实现预期的居中效果。

原代码 #

CSS

.education_flexColumn {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-grow: 1;
}

.education_flexRow {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: stretch;
  flex-grow: 1;
}

.divfh {
  display: flex;
  align-self: center;
  flex: 1;
  justify-content: center;
  height: 100%;
  flex-grow: 1;
}

HTML

<main>
  <div class="education_flexRow">
    <div class="education_flexColumn">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat voluptatum accusamus ipsum nulla, facere perspiciatis, quos quod, sint atque illum maiores iure. Excepturi harum quisquam iste ut esse ea non.
    </div>
    <div class="education_flexColumn">
      <div class="divfh">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt id at dolore veniam illo ut et hic incidunt sit nostrum, laboriosam ipsa porro recusandae facere dolores. Laudantium amet placeat molestiae!</div>
      <div class="divfh">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, voluptatem reprehenderit explicabo magnam totam animi neque aliquam? Iure, minima aut ducimus placeat aliquam mollitia ad tempora rerum ex commodi sunt!</div>
    </div>
  </div>
</main>

解决方案 #

问题出在.divfh的样式逻辑上：justify-content: center仅控制flex容器内子元素的水平排列，但容器内的文本属于inline元素，需要通过text-align: center来实现文本自身的居中对齐。修改后的CSS如下：

修改后的CSS

.education_flexColumn {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-grow: 1;
}

.education_flexRow {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: stretch;
  flex-grow: 1;
}

.divfh {
  display: flex;
  align-self: center;
  flex: 1;
  justify-content: center;
  height: 100%;
  flex-grow: 1;
  text-align: center; /* 添加这行实现文本居中 */
}

说明 #

• 添加text-align: center后，.divfh内的文本会水平居中，符合预期效果。
• 若希望第二列的两个.divfh元素在垂直方向上均匀分布，可以将.education_flexColumn的justify-content: center改为space-around或space-between，根据实际需求调整。

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