text-align仅控制块级容器内行内内容（文字、span、img等）的水平对齐，不能使块级元素自身居中；块级元素水平居中需用margin: 0 auto（需定宽）、flex布局或inline-block配合父级text-align:center。
text-align 只控制行内内容的水平对齐，不是“让整个盒子居中”——这是最常被误解的起点。用错地方，样式就失效。
text-align 该加在谁身上？
它必须作用于**包含文本的块级容器**（如 div、p、th、td），且只影响其内部的行内级内容（文字、span、img 等）。
- 给
div加text-align: center→ 里面所有文字、按钮文字、图片（若为行内）都水平居中 - 给子
div自己加text-align: center→ 没用，除非它里面还有文字；想让它自己居中，得换别的方法 - 给
table标签加text-align: center→ 无效，因为table不渲染文本，真正起作用的是td或th - 表格中数字列右对齐，直接写：
td.num { text-align: right; }，比每格加style更干净
块级元素怎么水平居中？
别指望 text-align 把一个 div 推到中间——它不是定位属性。真正有效的做法有三种，按场景选：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
margin: 0 auto：要求元素有明确宽度（如width: 400px或max-width: 80%），且不能是width: 100%或fit-content（Safari 旧版兼容性差） -
display: flex+justify-content: center：父容器设为 flex，子项自动居中；注意 iOS 9.3 之前 Safari 对单行 flex + 图片组合有 vertical-align 干扰，真机务必测 -
display: inline-block+ 父级text-align: center：适合按钮、图标这类小部件，不占满整行，又不想写 flex
vertical-align 为什么经常失灵？
vertical-align 不是“让 td 在表格里上下居中”，而是“让 td 里的内容，在这个单元格的高度范围内对齐”。常见失效原因：
- 没给
td设高度，或内容撑不开单元格 →middle看不出效果 写在 - 单元格里嵌了
div且没设display: inline-block→vertical-align对块级子元素无效 - 和
line-height混用时冲突：纯单行文字可用line-height == height实现垂直居中，但多行就失效
table 或 tr 上 → 大部分浏览器忽略（tr 在某些引擎下支持，但不可靠）
表格对齐最容易踩的坑
HTML5 已彻底废弃 align 和 valign 属性。但仍有两个现实问题绕不开：
- 老 Android WebView 或 Outlook 邮件客户端仍会优先解析
<td align="right">，哪怕你写了 <code>td { text-align: left !important }—— 这时只能删掉 HTML 里的align，别留后门 -
vertical-align: middle在td上写了，但某格里放了个img又带vertical-align: top→ 子元素会覆盖父级设置，得统一清理或重置 - 用
text-align: justify对中文表格单元格排版 → 字间距被强行拉大，阅读困难，慎用；数字列一律right，表头一律center，正文默认left是更安全的组合
对齐不是“加个样式就完事”，关键是判断对象类型、理解属性作用域、并预判老环境的行为偏差。尤其表格场景，
text-align 和 vertical-align 必须配对使用，且永远以 CSS 类形式管理，避免内联样式污染和覆盖混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
