flex布局居中是首选方案：父容器设display: flex、min-height: 100vh、justify-content: center和align-items: center，子元素无需宽高即可响应式居中。
现代项目里，display: flex + justify-content: center + align-items: center 是最直接、最可靠的登录框居中方案，不用算像素、不依赖子元素宽高、响应式下依然稳定。
用 Flex 实现登录框居中（推荐首选）
父容器（比如 或一个包裹 <form></form> 的 <div>）设为 Flex 容器，并确保它有足够高度：
<ul>
<li>
<code>min-height: 100vh 必须加，否则垂直居中无效——height: 100% 会失效，因为 html 和 body 默认没高度
justify-content: center 控制水平居中，align-items: center 控制垂直居中<form></form> 自身不用设 width，但建议加 max-width: 400px 防止在大屏上过宽display: flex 后，子元素的 float、vertical-align 和部分 margin 行为会失效用绝对定位 + transform 居中（适合模态框/遮罩层）
当登录框需要脱离文档流（比如带半透明遮罩、点击关闭等交互），position: absolute + transform: translate(-50%, -50%) 更稳妥：
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动时偏移 - 只写
left: 50%; top: 50%是常见错误——结果是元素左上角落在中心点，右下部分溢出 -
transform: translate(-50%, -50%)基于自身尺寸计算，比写死margin-top: -200px安全得多 - IE9+ 原生支持，旧版 Safari 需加
-webkit-transform前缀
别再用 margin: auto 水平居中后手动调垂直
margin: 0 auto 只能水平居中块级元素，且必须同时满足三个硬条件：
- 元素是
display: block（或inline-block等可设宽高的类型） - 有明确
width（不能是100%或auto） - 未脱离文档流（即不能有
float或position: absolute） - 一旦父容器是
display: flex或display: grid，这个声明就完全失效
text-align: center 不是万能的
text-align: center 只对行内内容起作用，比如文字、<span></span>、设为 display: inline-block 的按钮：
- 必须写在父容器上，不是子元素上
- 对
<div> 这类块级元素本身无效；试图给它加 <code>margin: 0 auto或justify-content是无效的 - 如果父容器用了
display: flex或display: grid，text-align对子元素的水平对齐可能被忽略
真正容易被忽略的是父容器的“上下文”：flex 和 grid 会接管对齐逻辑，text-align 和 margin: auto 在它们内部基本失效；而绝对定位的 top: 50% 若没配 transform 或负 margin，只会让元素错位。
