新手应优先用display: flex + justify-content: center + align-items: center，但必须为父容器设置明确高度（如min-height: 100vh），否则因交叉轴无可用空间导致align-items: center静默失效。
直接说结论：新手优先用 display: flex + justify-content: center 和 align-items: center，但必须给父容器设明确高度（比如 height: 100vh），否则看起来“没居中”——这其实是新手踩坑最多的地方。
Flex 布局为什么适合新手
写法最简、语义清晰、浏览器支持好（Chrome/Firefox/Safari/Edge 全系现代版本都稳），一行对齐逻辑对应一个 CSS 属性，不用记坐标偏移或负 margin。但关键限制很实在：
- 父容器必须有可计算的高度，
height: auto或没设高时，它只会“贴着内容收缩”，子元素再怎么align-items: center也无处可居 - 如果父容器本身被
float、position: absolute或display: inline-block干扰了文档流，flex 就可能失效 - IE10 及以下不支持，但如果你不是维护老系统，基本不用管
绝对定位 + translate(-50%, -50%) 的实际门槛
这个写法常被教程推荐为“万能解”，但新手容易卡在三处：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器忘了加
position: relative，结果子元素飞到整个视口中心，而不是你预期的盒子内部 - 误以为
transform: translate(-50%, -50%)是相对于父容器宽高，其实它是按自身宽高算的——这点反而是优势，所以不用知道子元素具体尺寸 - 如果子元素本身已有
transform（比如旋转或缩放），叠加写法必须合并：transform: translate(-50%, -50%) scale(1.2)，分开写会被覆盖
margin: auto 配合四边定位的隐藏条件
写成 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 看似“全自动”，但它有硬性前提：
- 子元素必须声明明确的
width和height（max-width、min-height不行，fit-content也不行） - Safari 15.4 之前版本对这个组合的支持有像素级偏移 bug，若项目要兼容老 iOS，得绕开
- 它不触发重排，性能比 transform 略好，但灵活性远不如 flex —— 比如无法配合
flex-wrap或响应式换行
table-cell 方案现在还值得学吗
用 display: table-cell + vertical-align: middle + text-align: center 能搞定单行/多行文本、图片甚至内联块，兼容性极强（IE6 都行）。但它的问题很实际：
-
vertical-align只对table-cell、inline-block、inline有效，在普通div上写等于白写 - 整个父容器变成表格行为，会丢失块级元素默认的 margin 折叠、BFC 触发等特性，后续扩展样式容易冲突
- 现代项目里，它更多是“保底方案”，而非首选；真要用，建议只封在独立组件内，别污染全局布局逻辑
真正容易被忽略的点是：居中从来不是孤立操作，它永远依赖上下文——父容器的尺寸来源、是否脱离文档流、子元素是否动态变化。选哪种方法，不看“最炫”，而看“谁的约束条件我当前最能控住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
