单行文字水平居中用text-align: center即可；水平+垂直居中必须用display: flex或position: absolute + transform，因text-align仅控制行内内容水平对齐，不作用于块级子元素或垂直方向。
直接结论：单行文字水平居中，text-align: center 就够；要水平+垂直都居中，必须用 display: flex 或 position: absolute + transform，别指望 text-align 能搞定垂直方向。
text-align: center 只对行内内容生效，不是万能的
它只控制块级容器里**文字、span、图片等行内级内容**的水平对齐位置，不会影响子元素自身的布局位置。常见错误是给一个 div 设了 text-align: center，里面却放了个 div 或 button（默认块级），结果纹丝不动——因为那个子 div 没被“居中对象”覆盖到。
- 想居中文本？直接在父容器加
text-align: center - 想居中一个块级子元素？得先让它变成
display: inline-block，再靠父容器的text-align: center生效 - 别用废弃的
align="center"属性，HTML5 中已不合法，VS Code 会标黄，严格模式下可能失效
Flex 布局实现真正可靠的水平+垂直居中
现代项目首选，写法简洁、语义清晰、响应式友好。但新手常卡在第一步：display: flex 必须加在父容器上，否则 justify-content 和 align-items 全无效。
- 父容器必须设
display: flex，否则所有 flex 属性都不起作用 -
justify-content: center控制水平居中，align-items: center控制垂直居中——两者要配对用才完整 - 如果父容器没设高度，
align-items: center可能没视觉效果（比如内容撑不满容器），可临时加height: 100px验证 - 子元素是
span等行内元素时，建议显式设display: block，避免意外换行或对齐偏移
绝对定位 + transform 是兼容性最强的“兜底方案”
适合需要支持 IE9/10 或嵌入老系统页面的场景。关键不是“定位”，而是“反向位移”：漏掉 transform: translate(-50%, -50%)，元素只会左上角落在中心点，而不是自身中心对齐。
- 父容器必须设
position: relative，建立定位上下文 - 子元素设
position: absolute; top: 50%; left: 50%，再加transform: translate(-50%, -50%) - 不需要知道子元素宽高，对动态字号、多行文本都有效
- 慎用
margin: auto配合绝对定位——它只在同时设了top/right/bottom/left且子元素有明确width和height时才可靠，文字内容基本不满足
最容易被忽略的一点：很多“居中失败”不是代码写错了，而是父容器本身宽度极小（比如没设 width 且子内容窄），或者被其他 CSS 规则（如 float、position: absolute）意外脱离文档流。动手前先用开发者工具选中父容器，看 computed 样式里的 width 和 display 是多少，比反复改 text-align 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
