登录框需用flex实现视口级居中：父容器设min-height: 100vh、display: flex、justify-content: center、align-items: center；登录框设max-width: 480px、width: 100%、box-sizing: border-box，高度由内容自然撑开。
登录框没法“同时”宽高自适应又居中——必须明确：宽度可以自适应（靠 max-width + width: auto），但高度不能真正“自适应居中”，因为垂直居中依赖容器高度基准，而内容撑开的高度无法被居中算法反向约束。实际要的是“内容驱动宽度 + 视口级垂直居中”。
用 display: flex 实现视口级水平垂直居中
这是现代最可靠的方式，不依赖固定宽高，也不需要计算负 margin。
- 父容器（如
或包裹<form></form>的<div>）必须设 <code>min-height: 100vh，否则没高度可居中 - 加
display: flex、justify-content: center（水平）、align-items: center（垂直） - 登录框自身设
max-width: 480px（防过宽）、width: 100%（窄屏下占满）、padding和box-sizing: border-box - 别在登录框上写
height——让它由内容（<label></label>、<input>、<button></button>）自然撑开 - 登录框容器设
max-width: 400px，窄屏下自动收缩到 100% 宽度，宽屏下停在 400px - 内部
<input>等表单控件保持默认width: 100%，并加box-sizing: border-box防溢出 - 避免用
width: 100%直接套在登录框上——它会忽略max-width，导致小屏时过宽或换行错位 - 如果真想让输入框“刚好包住文字”，得用 JS 动态测宽，CSS 无解
- 忘了设
width（或用了width: 100%）→ 剩余空间为 0 →margin: auto失效 - 父容器是
display: flex或display: grid→margin: auto被布局规则接管，不再按传统方式计算 - 子元素用了
float或position: absolute→ 脱离文档流 →margin: auto不生效 - 它对垂直方向完全无效——
margin: auto 0不会让元素上下居中 - 必须确保父容器有
position: relative（或absolute/fixed），否则定位参考是根元素 -
left: 50%; top: 50%只是把左上角移到中心，必须补transform: translate(-50%, -50%)才算真正居中 - 如果登录框内有
textarea或多行内容，高度变化时不会触发重居中——它已脱离文档流 - 屏幕缩放或字体放大后，
transform的像素偏移可能失准，尤其在旧版 Safari 中
width: auto 和 max-width 的组合怎么写才有效
width: auto 单独用在块级元素上等同于 width: 100%（即填满父容器），起不到“自适应内容宽度”的效果；真正可控的是 max-width 配合流式行为。
为什么 margin: 0 auto 只能水平居中，且容易失效
它只作用于块级元素的**水平外边距分配**，浏览器把左右剩余空间均分，但前提是：有剩余空间可分。
position: absolute + transform 的坑在哪
这种方式看似灵活，但对响应式和可访问性很不友好，尤其当页面可滚动或有动态内容时。
真正难的不是“怎么写居中”，而是判断该用哪种居中逻辑：内容驱动？视口锚定？还是脱离流精确定位？选错前提，后面所有样式都在对抗浏览器渲染机制。
