如何用Flexbox实现内容居中？求助Flexbox居中失效问题

你遇到的问题核心是：要让子div内部的内容居中，需要把这个子div本身也设置为Flex容器，而不是只在外层容器上用对齐属性。外层的justify-content和align-items控制的是子元素（两个div）在外层容器中的排列，和子元素内部的内容无关。

修改后的代码如下：

<div style="display: flex; flex-direction: row;">
    <div style='flex-grow: 1; '>
        Test
    </div>
    <!-- Test 2 现在内容会居中 -->
    <div style='flex-grow: 1; display: flex; justify-content: center; align-items: center;'>Test 2 </div>
</div>

关键修改点：

• 给Test 2所在的div添加display: flex，让它成为Flex容器
• 加上justify-content: center（水平居中内容）和align-items: center（垂直居中内容）

这样就能实现该div内所有内容的水平和垂直居中了。

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