登录框居中需按场景选择方案：水平居中用margin:0 auto+width/max-width；全屏居中用flex+min-height:100vh；绝对定位居中用left/top+transform。
登录框居中不是加个 text-align: center 就完事的——它取决于你到底想“居中什么”：是让表单在页面里上下左右都正中，还是只让它水平居中；是固定宽高、响应式，还是叠加在遮罩层上。选错方案，轻则偏移，重则布局崩溃。
用 margin: 0 auto 水平居中时，必须设 width 或 max-width
这是最常踩的坑：给 <form> 加了 margin: 0 auto 却没生效。原因就一个——<form> 默认是块级元素，但它的宽度是 100%（撑满父容器），没有“剩余空间”可分，auto 就没意义。
- 必须显式设置
width（如width: 400px）或更推荐的max-width: 480px（兼顾小屏适配） - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给表单加
float或position: absolute，这些会让margin: auto失效 - 如果父容器是
<body>，记得确认html和body没被其他样式意外设了height: 0或overflow: hidden
用 Flex 实现全屏居中，min-height: 100vh 是关键前提
想让登录框在视口里真正“上下左右都居中”，display: flex 是目前最稳的方案。但它依赖父容器有高度，而默认 <body> 高度由内容撑开——没内容时就是 0。
- 父容器（比如一个包裹
<form>的<div class="login-wrapper">）必须设min-height: 100vh，不能只写height: 100vh（否则内容超长时会被截断） - CSS 要写全：
display: flex; justify-content: center; align-items: center; -
<form>自身不需要设宽度，但建议加max-width防止在大屏上过宽 - 注意 Safari 旧版本对
vh的处理异常（比如地址栏缩放影响），必要时可 fallback 到 JS 动态计算高度
用 position: absolute 居中时，transform: translate(-50%, -50%) 缺一不可
当登录框需要脱离文档流（比如浮在半透明遮罩层上），position: absolute 是合理选择。但只写 left: 50%; top: 50% 会让框的左上角落在中心点，整体偏右下。
立即学习“前端免费学习笔记（深入）”；
- 子元素（登录框）必须设
position: absolute; left: 50%; top: 50% - 父容器必须有定位上下文，即
position: relative（或absolute/fixed） - 必须补上
transform: translate(-50%, -50%)，把自身宽高的一半“挪回来” - 这个组合对宽高未知的登录框也有效，但要注意滚动时定位可能漂移——此时应改用
position: fixed并配合inset: 0
别混淆“表单居中”和“表单内文字/输入框居中”
给 <form> 设了居中，不代表里面的 <input> 文字就自动居中了。这两件事 CSS 控制路径完全不同。
- 输入框内文字居中：直接给
input加text-align: center，它同时作用于用户输入和placeholder - 按钮居中：按钮是行内元素，
margin: 0 auto无效；应该给它的父容器（比如<div class="form-actions">）设text-align: center -
label和input垂直对齐：不能靠父容器居中解决；要用vertical-align: middle或把它们包进 Flex 容器里用align-items: center
真正容易被忽略的是：居中行为是否随内容变化保持稳定。比如输入框获得焦点后拉长、密码强度提示动态插入、错误信息出现导致高度突变——这些都会让基于固定尺寸的居中（如 margin-top: -200px）立刻失效。现代方案（Flex/Grid）的优势就在于它不依赖具体像素值，只要结构没崩，居中就始终成立。
