text-align: center仅对行内内容有效；居中块级元素需用margin: 0 auto（需设宽度）、flex布局（需父容器display: flex+justify-content/align-items）或绝对定位+transform。
text-align: center 只对行内内容有效
很多人一上来就给父容器加 text-align: center，结果发现里面的 div 没动——这很正常，因为这个属性**只影响行内级内容的水平对齐**，比如文字、span、img（默认是 inline-block），但对块级子元素完全没作用。
常见错误场景：
- 父容器设了
text-align: center，子div依然靠左 - 子
div里有文字居中了，但整个div本身没居中
正确用法：
- 仅用于让段落文字、按钮文字、图标或图片在父容器内水平居中
- 配合
line-height可实现单行文本垂直居中（容器高度 =line-height） - 若要居中块级元素，必须换方法，比如
margin: 0 auto或 Flex
margin: 0 auto 要求块级 + 显式宽度
margin: 0 auto 是最经典也最容易翻车的水平居中方式。它不是“自动居中”，而是浏览器把左右外边距均分——前提是元素得能“被分”。
失效的典型原因：
- 目标元素没设
width或max-width（块级元素默认 100% 宽，auto就没意义） - 元素是
inline或inline-block（需额外处理，比如加text-align: center到父级） - 父容器用了
display: flex或display: grid（此时margin: auto行为被覆盖）
实操建议：
- 写死宽度（如
width: 320px）最稳妥；响应式可用max-width: 80% - 确保元素是块级：
display: block（默认就是，除非你改过） - 别指望它做垂直居中——它只管左右
Flex 布局居中要配齐三要素
现代项目首选 display: flex，但它不是“设了就完事”。真正起效需要三个条件同时满足：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器设
display: flex - 父容器有明确高度（尤其垂直居中时，
height或min-height缺一不可） - 子元素不能脱离 Flex 流（比如加了
position: absolute或float）
常用组合：
- 仅水平居中：
justify-content: center - 仅垂直居中：
align-items: center - 完全居中：
justify-content: center; align-items: center
注意兼容性：IE10+ 需加 -ms- 前缀，IE9 及以下不支持，老项目慎用。
绝对定位 + transform 是未知尺寸的兜底方案
当元素宽高不确定（比如动态生成的内容、响应式图片）、又必须精确居中时，position: absolute 配合 transform: translate(-50%, -50%) 是目前最可靠的选择。
关键点：
- 父容器必须是
position: relative（否则会相对视口定位） - 子元素设
position: absolute; top: 50%; left: 50%，再用transform反向偏移自身一半 - 不需要知道宽高，也不依赖父容器是否设高（但若要垂直居中，父容器仍需有高度）
对比传统负 margin 法：margin-top: -XXpx 要硬编码尺寸，一改就崩；transform 方案更健壮，且支持动画平滑过渡。
真正容易被忽略的是：父容器的定位上下文。很多居中失败，不是代码写错了，而是忘了给父级加 position: relative——它不报错，但子元素直接飞到页面中心去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
