Flex布局中justify-content无法居中文本的原因咨询

嗨，这个问题问得特别好！不少刚上手Flex布局的小伙伴都会遇到这个困惑，我来给你讲明白其中的门道~

首先得搞懂justify-content的本职工作——它是**用来在Flex容器的主轴方向上对齐「Flex项目（flex items）」**的，而不是直接对齐项目内部的文本内容。

看你的代码结构：

.box {
  background-color: aquamarine;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center; /* 你以为没生效的属性 */
  /* text-align: center; */
}

<div class="box">
  <div class="text">Hello I'm Here lets go</div>
</div>

这里.box是Flex容器，里面的.text是唯一的Flex项目。其实justify-content: center已经生效了！只是你看不到明显效果——因为.text这个项目默认是收缩到内容宽度的，也就是它的宽度和里面的文本完全一样，所以当它在300px宽的.box里水平居中时，你肉眼根本察觉不到变化，看起来文本还是在原来的位置。

那为什么text-align: center能让文本看起来居中呢？因为这个属性是用来对齐块级元素内部的行内/行内块内容的，它作用的是.text这个盒子里的文本本身。当你打开这个属性，文本就会在.text的盒子范围内水平居中，这时候你就能明显看到效果了。

给你个小实验验证一下：给.text加个背景色，比如：

.text {
  background-color: pink;
}

你会瞬间看到粉色的.text盒子其实已经在蓝绿色的.box里水平居中了，只是之前因为没有背景，你没发现罢了！

如果你想通过Flex相关的方式让文本呈现居中效果，也可以把.text也改成Flex容器，这样就能用justify-content直接对齐内部文本了：

.text {
  display: flex;
  justify-content: center;
}

这样文本也会乖乖居中~

内容来源于stack exchange