text-align: center仅使父容器内行内内容（文字、img等）水平居中，对块级子元素无效；若要居中块级元素自身，需用margin: 0 auto、flex或absolute等方案。
直接给父容器加 text-align: center 就行，但必须确认你居中的对象确实是“文字内容”，而不是“那个 div 本身”——这是 90% 的人卡住的地方。
text-align: center 只对父容器内的行内内容生效
它让子元素里的文字、span、img（作为替换元素）水平居中，但对子 div 自身无效。常见错误现象：div 加了 text-align: center，里面一段文字没动，其实是文字被父容器的 padding 或 margin 推偏了；或者父容器宽度太小，文字换行后看起来像没居中。
- 用浏览器开发者工具选中目标文字，看 computed 样式里
text-align是否被继承、是否被更高优先级规则覆盖 - 给父容器临时加
border: 1px solid red，确认它的视觉范围——常会发现它窄得离谱 - 若父容器是
div且没设宽高，加width: 100%或width: fit-content再试
单行文本居中最快方案：text-align + line-height
容器高度固定、内容只有一行时，这是最轻量解法。前提是高度已知，且不响应字号变化。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 如果容器高度是
40px，就设line-height: 40px，再加text-align: center -
line-height是基于字体大小计算的，不是绝对像素值——父元素字体变了，它也会变 - 多行或高度不固定时，
line-height会失效，文字可能被截断或错位
Flex 布局实现真正可靠的水平+垂直居中
现代项目首选，不依赖行高、不关心内容尺寸，但新手常漏掉关键前提。
- 必须同时设置父容器
display: flex，否则justify-content: center和align-items: center完全没反应 - 子元素是
span等 inline 元素时，建议显式设display: block，避免意外换行 - IE11 对
min-height在 flex 容器里支持有 bug，慎用
想让一个 div 自己居中？别用 text-align
text-align: center 不负责块级元素自身的定位。那是 margin: 0 auto 或 flex 的事。
- 用
margin: 0 auto必须满足两个条件：子元素是块级、且有明确width（或max-width） - 绝对定位居中要写全：
position: relative（父）+position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，漏掉transform就会偏移自身一半宽高 - Flex 布局下，
text-align完全不参与水平对齐，靠的是justify-content
最容易被忽略的一点：你到底想居中“文字在容器里”，还是“这个容器在页面上”。前者用 text-align，后者得换思路——混淆这两者，是所有居中失败的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
