flex居中需父容器有明确高度（如height: 100vh）且未被float、absolute等破坏流；绝对定位居中需父设position: relative，再用top/left+translate；text-align+line-height仅适用于单行文本。
直接用 display: flex + justify-content: center + align-items: center，但必须确保父容器有明确高度（比如 height: 100vh），否则看起来没居中——这是最常被忽略的硬条件。
flex 居中为什么写了没效果？
不是写法错，而是父容器“没高”或“流被破坏”：
-
height或min-height缺失：flex 本身不撑高，子元素会按内容高度堆叠，视觉上根本不动 - 父容器被
float、position: absolute或其他重置样式干扰，导致文档流异常 - 子元素用了
margin: auto，在 flex 容器里会被主轴/交叉轴对齐逻辑覆盖，不起作用 - 父容器是
display: grid或嵌套 flex，此时text-align: center对子元素无效
绝对定位 + translate(-50%, -50%) 的安全写法
适合模态框、提示层等脱离文档流的场景，关键在坐标系控制：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%和left: 50%会相对于视口计算 -
transform: translate(-50%, -50%)是基于自身宽高，不需要提前知道尺寸，比写死margin-top: -xxpx安全得多 - 旧版 Safari 需加
-webkit-transform: translate(-50%, -50%) - 如果子元素已有其他
transform（如scale(1.2)），要合并写：transform: translate(-50%, -50%) scale(1.2)，否则顺序叠加会出偏移
text-align + line-height 只对单行文本有效
这是最轻量的方案，但边界极窄：
立即学习“前端免费学习笔记（深入）”；
-
text-align: center必须写在父容器上，且父容器需是块级（display: block默认满足） -
line-height必须等于容器height，多行文本会撑高容器，导致垂直错位 - 图片、
span等内联元素默认受此影响；但若设了display: block，就得换 flex 或绝对定位 - 按钮、输入框等替换元素（replaced element）对
line-height响应不稳定，别硬套
真正容易被绕开的是上下文：flex 和 grid 会接管对齐逻辑，text-align 和 margin: auto 在它们内部基本失效；而绝对定位的 top/left 是否生效，完全取决于父容器有没有非 static 的 position 值——这些细节不查 computed styles 很难一眼发现。
