要实现多行文字水平居中，需设置容器为display: flex、flex-wrap: wrap和justify-content: center，使每行内容独立居中，适用于标签云、卡片标题等场景，注意保留足够空白避免子元素撑满导致居中失效。
在使用 CSS Flexbox 实现多行文字的水平居中时，关键是合理搭配 flex-wrap 和 justify-content 属性。当文字内容较多、需要换行显示时，通过设置容器为 flex 布局并允许换行，可以自然实现每一行内部的水平居中效果。
1. 设置容器为 Flex 并启用换行（flex-wrap）
要让内容支持多行显示，必须将父容器设为 display: flex，并设置 flex-wrap: wrap，这样子元素在空间不足时会自动折行。
常见写法：- display: flex：启用弹性布局
- flex-wrap: wrap：允许子项换行
- justify-content: center：使每行内的内容水平居中
2. 使用 justify-content 控制水平对齐
justify-content: center 会让主轴（默认是横轴）上的内容居中对齐。即使内容换成了多行，每一行都会独立进行居中处理，前提是每行的内容没有占满整个宽度。
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.text-item {
margin: 5px; /* 可选：增加间距 */
}
在这个结构下，多个 .text-item 元素会在一行中居中排列，超出容器宽度时自动换行，新行依然保持居中对齐。
立即学习“前端免费学习笔记（深入）”；
3. 多行文本块的居中场景应用
如果你有一段长文本被拆分为多个 <span></span> 或 <div> 显示，并希望它们整体在容器中多行居中，这种方法非常有效。<font>适用情况包括：</font><ul>
<li>标签云中的标签水平居中排列</li>
<li>文章摘要卡片的标题多行对齐</li>
<li>响应式布局中动态换行的文字组</li>
</ul>
<p>基本上就这些。只要记住：开启 <strong>flex-wrap: wrap</strong> 让内容能换行，再用 <strong>justify-content: center</strong> 让每行内容居中，就能轻松实现多行文字的水平居中效果。不复杂但容易忽略的是容器宽度和子元素宽度的关系——如果子元素撑满整行，居中就看不出来了。所以留出足够的空白空间很重要。</p>
</div>
