推荐用display: flex实现全屏居中：父容器设min-height: 100vh、display: flex、justify-content: center、align-items: center；子元素不脱离文档流，且不可设position: absolute或float。
用 display: flex 实现全屏居中（推荐）
这是目前最可靠、写法最干净的方式，尤其适合登录页这种需要在视口正中央显示的场景。
- 父容器（比如一个包裹
<form>的<div class="login-wrapper">）必须设min-height: 100vh，否则垂直方向没空间可居中 - 加
display: flex、justify-content: center、align-items: center -
<form>自身不设width: 100%，改用max-width: 400px防止在大屏上过宽 - 注意别直接在
<body>上加display: flex，容易干扰全局布局；包一层容器更安全
常见错误：父容器高度为 auto，导致 align-items: center 失效，表单只水平居中、卡在顶部。
用 position: absolute + transform 居中（适合模态框）
当登录框需要覆盖在页面之上（比如点击“登录”后弹出），脱离文档流时，这个方案更合适。
- 登录框元素设
position: absolute、top: 50%、left: 50% - 必须紧跟着加
transform: translate(-50%, -50%)，否则定位点是左上角，会整体偏右下 - 它的最近定位祖先（通常是父
<div>）得有position: relative，否则参考的是视口，滚动时可能错位 - 不依赖子元素宽高，响应式友好，但要注意低版本 Android WebView 需加
-webkit-transform
容易踩的坑：忘了给父容器设 position: relative，或者把 transform 写成 margin-top: -100px 这类固定像素值——输入框高度一变就崩。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么 margin: 0 auto 常常不生效
很多人试了这个方法却失败，不是语法错，而是条件没满足。
- 必须显式设置
width（比如width: 320px或max-width: 90%），width: 100%直接失效 - 元素必须是块级（
display: block或默认行为），<form>默认是块级，但若被 JS 动态加了display: inline-block就不行 - 父容器不能有
text-align: left且子元素是inline-block，否则会干扰计算 - 它只管水平居中，垂直方向完全不管——想上下居中还得配其他手段（比如
flex或position）
典型现象：写了 margin: 0 auto，刷新后还是靠左；检查发现控制台里元素宽度是 100%，或 computed style 显示 margin-left/right 是 0px。
表单内部元素对齐别混淆层级
居中做完，常发现 <label> 和 <input> 不对齐，按钮也歪着——这不是居中问题，是内部排版失控。
-
text-align: center只影响行内内容（文字、<span>），对<input>这种替换元素的内容对齐有效，但不影响它在父容器里的位置对齐 - 让按钮居中：给它外层
<div>设text-align: center，而不是给按钮自己加margin: 0 auto（按钮是块级，默认不响应） -
<label>和<input>垂直不对齐？加统一vertical-align: middle，或直接用display: flex包裹每组
真正卡住人的，往往不是“怎么写居中”，而是“为什么写了却不居中”——大概率是父容器高度缺失、定位上下文断开，或者误把行内元素当块级来操作。
