这三个属性确实非常容易混淆，因为它们翻译成中文都带有“居中”的意思。
要彻底搞懂它们的区别，其实只需要记住一个核心概念：它们管的东西不一样，管的方向也不一样。
为了方便理解，我们假设你有一个“大盒子”（父容器），里面装了一个“小盒子”（子元素），小盒子里写着一段文字。
1. justify-content: center; （管小盒子的“左右”）
它管谁： 大盒子和小盒子之间的空间分配。
什么方向： 主轴方向（默认是水平方向，即左右）。
什么效果： 它把小盒子推向大盒子的正中间。如果小盒子很小，它就不会靠左，而是浮在正中间。
口诀： 左右居中盒子。
2. align-items: center; （管小盒子的“上下”）
它管谁： 大盒子和小盒子之间的对齐方式。
什么方向： 交叉轴方向（默认是垂直方向，即上下）。
什么效果： 它把小盒子从顶部拉下来，放在大盒子的垂直正中间。如果没有它，小盒子默认会贴着大盒子的顶部。
口诀： 上下居中盒子。
3. text-align: center; （管盒子里的“文字”）
它管谁： 仅仅管小盒子里面的文字、图片等“行内元素”。
什么方向： 水平方向（左右）。
什么效果： 它不管盒子在哪里，它只管盒子里的字。如果小盒子比较宽，这段字就会在小盒子里左右居中，不会顶在最左边。
口诀： 左右居中文字。
举个生活中的例子：一个相框
想象你买了一个大相框（大盒子），要放一张小照片（小盒子），照片上写着字。
justify-content: center; 👉 决定照片在相框里左边、右边、还是中间。（放到中间）
align-items: center; 👉 决定照片在相框里上面、下面、还是中间。（放到中间）
text-align: center; 👉 决定照片上的字，是靠照片左边写，还是写在照片正中间。
为什么它们经常一起出现？
当你写一段代码，想要在屏幕正中间弹出一个提示框，并且提示框里的字也要居中时：
你需要 justify-content: center; 和 align-items: center; 把提示框推到屏幕的最中间。
但是，如果提示框比较宽（比如宽 300px），里面的文字默认会从最左边开始写。所以你还需要 text-align: center; 让文字在提示框里也居中。
⚠️ 一个非常重要的前提：
justify-content 和 align-items 是 Flexbox（弹性盒子）的属性。如果你要用它们，大盒子的 CSS 里必须先写上 display: flex;，否则它们俩完全不起作用！而 text-align: center; 是老属性，不需要 flex 就能用。