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%) 的安全写法

适合模态框、提示层等脱离文档流的场景，关键在坐标系控制：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 父容器必须设 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 很难一眼发现。

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