真正在屏幕正中央需同时水平垂直居中：推荐flex方案（父设display: flex; justify-content: center; align-items: center; min-height: 100vh），或绝对定位+transform（子设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 父设position: relative）。
元素要真正在屏幕正中央（水平 + 垂直），不是加个 text-align: center 或 margin: 0 auto 就能搞定的——那俩只管水平，且只对特定类型元素生效。
用 display: flex + justify-content + align-items 最省心
这是现代项目里最推荐、最不容易翻车的全向居中方案，只要父容器能撑满视口，子元素就能稳稳钉在正中央。
- 必须确保父容器有明确高度，常见写法是
min-height: 100vh（别只写height: 100%，它依赖父级高度，body 上不设height: 100%就会失效） - 父容器加
display: flex; justify-content: center; align-items: center;，子元素本身不用任何居中样式 - 子元素若用了
position: absolute或float，会脱离 Flex 流，居中失效 - IE10/11 需加
-ms-前缀，但justify-content在 IE 中有已知 bug，慎用于强兼容需求场景
position: absolute + transform: translate(-50%, -50%) 适合弹窗类脱离文档流元素
当元素本就要脱离文档流（比如模态框、提示气泡），这个组合比靠 margin-top 算偏移更可靠，也不依赖宽高是否已知。
- 目标元素必须设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 它的**最近定位祖先**（通常是直接父容器）必须有
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动时就飘走 - 低版本 Android WebView（4.3 及以下）需加
-webkit-transform - 别用
margin-top: -100px这类硬编码值——元素尺寸一变，立刻错位
text-align: center 和 margin: 0 auto 根本不解决“全屏居中”问题
这两个是高频误用点。它们连“垂直”都不参与，更别说“屏幕正中央”了。
立即学习“前端免费学习笔记（深入）”；
-
text-align: center只影响父容器内**行内内容**（文字、<img>、<span>）的水平对齐，对<div>这类块级子元素完全无效 -
margin: 0 auto要求元素是块级、有显式width、且不能是flex或grid容器的直系子元素——它天生就不为“全屏”设计，也压根不处理垂直方向 - 给
<body>加text-align: center或margin: 0 auto，页面布局不会有任何居中变化
真正容易被忽略的是：所谓“全屏居中”，本质是让元素在**有明确边界和尺寸的容器内**居中。如果父容器没高度（比如忘了设 min-height: 100vh）、或者元素自己脱离了流（比如加了 position: absolute 却没配好定位上下文），再漂亮的 CSS 也会静默失效。
