text-align: center 必须写在父容器上，因为它是容器级属性，只作用于内部行内内容；在 flex 容器中失效，需用 justify-content 和 align-items 控制居中。

行内超链接（@#@#@#@#@#@#@#@#@#@0 → 无任何居中效果

正确写法：

@#@#@#@#@#@#@#@#@#@1

如果父容器已经是块级元素（如

、

、

），直接在它的 CSS 规则里加 text-align: center 即可

在 flex 容器里为什么 text-align 失效？

一旦父容器设了 display: flex，它的子元素就变成 flex 项目，text-align 对它们不再起作用——此时居中逻辑由 justify-content 和 align-items 控制。

• 若父容器是 display: flex，想让 水平居中，应写：justify-content: center
• 若还想垂直居中，需同时加：align-items: center，且父容器要有明确高度（如 min-height: 60px）
• 注意： 本身无需改 display，flex 下它自动成为 flex item

想让多个 并排居中，但又不希望它们挤成一行？

这是常见误判点：很多人以为“多个链接居中”就得每个都加 text-align，其实关键在**父容器的 display 类型和子项排列方式**。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 若希望它们横向并排、整体居中：父容器设 text-align: center，每个 设 display: inline-block（避免空格换行影响间距）
• 若希望它们纵向堆叠、整体居中：父容器设 text-align: center + display: flex; flex-direction: column; justify-content: center;
• 避免踩坑：不要给 加 float: left 后再试图居中——float 元素脱离文档流，text-align 对它无效

真正容易被忽略的是：居中行为始终由**父容器的布局上下文**决定，不是 自身能“主动居中”的。哪怕只是加个 text-align: center，也要确认父容器没被 display: flex 或 display: grid 覆盖掉这个能力——否则你会花十分钟调试，最后发现只是少删了一行 CSS。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！