text-align: center 仅对行内内容有效，不居中块级子元素；margin: 0 auto 需块级、定宽、文档流内；flex 的 justify-content 作用于直系子元素；absolute + transform 适用于脱离流的全向居中。

text-align: center 只对行内内容有效

它不是“让子元素居中”，而是让子元素里的文字、图片（作为行内级内容）在父容器里水平对齐。给一个

直接加 text-align: center，那个

自身纹丝不动——除非它里面是文本或 这类默认 inline 的东西。

常见错误现象：.parent { text-align: center; } 后，里面的 .child { display: block; width: 200px; } 还是靠左贴边——因为 text-align 不作用于块级子元素。

• 适用场景：段落文字、按钮文字、（未设 display: block 时）、
• 副作用：继承性太强，子元素里所有文字也会居中，得手动重置 text-align: left
• 兼容性极好，IE6+ 都支持，但完全不处理垂直方向

margin: 0 auto 要求块级 + 定宽 + 在普通流中

这是真正“把元素自身推到中间”的老派方案，但条件卡得很死：元素必须是 display: block（或 table 等可设宽的格式上下文），必须显式写 width（不能是 100% 或 auto），且不能脱离文档流（即不能有 float、position: absolute）。

常见错误现象：写了 margin: 0 auto 却没反应——八成是忘了设 width，或者这个元素其实是 默认 inline，得先加 display: block。

• 适用场景：定宽导航栏、卡片、表单容器等需要稳定居中的块级组件
• 父容器若是 display: flex 或 display: grid，该声明会被直接忽略
• 无法垂直居中；Safari 对 margin: auto 在 flex 容器里有偏移 bug，别混用

flex 布局的 justify-content / align-items 一行代码但有隐性约束

display: flex; justify-content: center; 确实省心，但它只作用于**直系子元素**，而且前提是父容器已启用 flex 上下文——光写子元素样式没用。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

常见错误现象：写了 justify-content: center 却不生效——优先检查三件事：display: flex 是否真加在父容器上？父容器有没有明确高度（尤其垂直居中时）？子元素有没有用 position: absolute 或 float 主动退出 flex 流？

• 适用场景：按钮组、模态框内容、响应式网格项等一维布局居中
• IE10–11 需要 -ms-justify-content 前缀；IE9 及以下完全不支持
• 副作用明显：子元素自动变成 flex item，vertical-align、float、甚至部分 margin 行为会失效

absolute + transform: translate(-50%, -50%) 最通用但依赖定位上下文

这是目前兼容性最好、行为最确定的全向居中方案，特别适合模态框、加载提示、气泡弹层这类必须脱离文档流的场景。但它不是“独立生效”，而是一整套配合：父容器要有定位上下文，子元素必须绝对定位，平移值必须成对出现。

常见错误现象：只写 left: 50% 和 top: 50%，结果元素左上角卡在中心点；或者父容器没设 position: relative，导致元素相对于整个视口定位，一滚动就跑偏。

• 适用场景：遮罩层、Tooltip、Toast、固定位置的图标按钮
• IE9+ 支持，但旧版 Safari 需加 -webkit-transform 前缀
• 子元素宽高若动态变化（如图片未加载完），会出现短暂“闪动”，建议提前设 min-height 或用 aspect-ratio 缓解

真正难的不是抄代码，而是判断这个元素是否脱离文档流、它的父容器用了什么布局模式、要不要考虑老浏览器——这些细节一错，哪怕属性写得再标准，页面照样不对劲。

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