<form> 用 margin: auto 无效果，因其虽为块级元素，但未设明确宽度时默认占满父容器，无剩余空间可分配；须配合 width（如 width: 320px）和 margin: 0 auto 才能水平居中。
用 margin: auto 居中 <form> 为什么没效果？
因为 <form> 默认是块级元素，margin: auto 只对设置了明确宽度的块级元素生效。如果你只写 margin: auto 却没设 width，浏览器会按 100% 宽度渲染，左右 margin 自然为 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给登录表单容器（比如
<div class="login-box">）设置固定宽度，例如width: 320px - 加上
margin: 0 auto（垂直方向留空，避免意外撑高） - 确保父容器是块级且宽度足够（如
<body>或全宽<div>）
Flex 布局居中：最简可靠的现代方案
Flex 不依赖宽度设定，也不受文档流干扰，适合响应式场景。但要注意父容器必须启用 display: flex，且子元素不能是 float 或 position: absolute。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex; justify-content: center; align-items: center; - 如果登录框内容太多导致垂直溢出，加
min-height: 100vh保证视口内居中 - 避免在父容器上同时用
text-align: center——对 flex 子项无效，还可能干扰内联元素
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
绝对定位 + transform 居中：兼容老浏览器但需谨慎
这个方法在 IE9+ 都能用，但前提是父容器要设 position: relative，否则 top/left 会相对于 <html> 计算，容易偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 登录框本身设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 父容器必须有
position: relative（哪怕只是空 div） - 不要给登录框设
margin，它会干扰transform的基准点 - 如果页面有滚动条，
100vh可能略高于可视区，此时min-height: 100vh比height: 100vh更稳妥
为什么 text-align: center 只能让按钮居中，不是整个框？
text-align 只影响行内级内容（如文字、<input>、<button>），对块级子元素（如 <div> 包裹的 <form>）完全无效。常见误操作是给 body 加 text-align: center，结果只看到输入框文字居中，外框纹丝不动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果真想靠
text-align辅助，得把登录框设成display: inline-block，再配合text-align: center在父容器生效 - 但这样会引入基线对齐问题，需要额外加
vertical-align: middle或font-size: 0清除空白符间隙 - 不如直接选 flex —— 少两行代码，少三个坑
position: relative 这个常被忽略的锚点。 
