flex布局居中需父容器设明确高度，如height: 100vh；绝对定位+translate需父容器position: relative；margin: auto要求子元素宽高固定；grid的place-items: center语义化强但不兼容ie。
Flex 布局居中：最简写法但要注意父容器高度
现代项目首选 display: flex，两行 CSS 就能搞定：justify-content: center 控制水平，align-items: center 控制垂直。但容易忽略的是：父容器必须有明确高度（比如 height: 100vh 或 min-height: 300px），否则子元素会“塌”到内容高度，看起来没居中。
常见错误现象：.container { display: flex; justify-content: center; align-items: center; } 写了但没效果——八成是父容器没设高，或者被其他样式（如 float、position: absolute）干扰了文档流。
适用场景：动态内容、未知宽高的卡片/按钮/文字块；不推荐用于需要兼容 IE10 以下的老系统。
绝对定位 + translate：兼容性好，但 transform 偏移依赖坐标系
写法固定：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。关键点在于：父容器必须设 position: relative（或 absolute/fixed），否则 top/left 会相对于 viewport 定位，导致错位。
容易踩的坑：
-
transform的百分比值是相对于自身宽高的，不是父容器——所以translate(-50%, -50%)永远把左上角拉回中心，无需知道具体像素 - 若子元素含
transform: scale(1.2)等叠加变换，translate会受其影响，建议用transform: translate(-50%, -50%) scale(1.2)合并写 - 在
will-change: transform或动画密集场景下，频繁触发重排重绘，性能略低于 Flex
margin: auto 配合四边定位：不用 transform，但需注意浏览器行为差异
这种写法是：position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;。它靠浏览器自动计算外边距来居中，优势是不依赖 transform，对某些旧版安卓 WebView 更稳。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但有两个硬限制：
- 子元素必须有明确的
width和height（哪怕用max-width+fit-content也不行） - Chrome/Firefox 行为一致，但 Safari 15.4 之前版本对
margin: auto在绝对定位下的支持有 bug，可能偏移几个像素
适用场景：弹窗、加载 spinner 这类尺寸固定的 UI 元素，且项目需覆盖较老 iOS 设备。
Grid 的 place-items: center：二维控制强，但别滥用在简单场景
display: grid; place-items: center; 是最语义化的写法，一行代码同时控制行列对齐。它本质等价于 justify-items: center; align-items: center;，适用于单个子元素居中。
需要注意：
- 如果父容器里有多个子元素，
place-items会影响所有子项；想只居中某一个，得用justify-self+align-self - Grid 布局会创建新的格式化上下文（BFC），可能意外清除浮动或改变 margin 合并行为
- IE 完全不支持
place-items，即使写了display: grid也会降级为普通块级流
真正复杂的地方不在写法本身，而在于你是否清楚：这个居中需求是孤立的，还是嵌套在更大布局体系里——比如一个 Grid 容器内部再套 Flex 居中，反而增加维护成本，不如统一用 Grid 规划整页结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
