margin: auto 垂直居中失效是因块级元素默认ua外边距及父容器高度未定义；flex居中偏移常因html空白符生成匿名文本节点并按基线对齐；absolute居中偏差源于定位上下文错误或未设box-sizing:border-box。
为什么 margin: auto 居中会多出空白？
不是居中本身有问题，而是块级元素（比如 <form></form> 或 <div class="login">）默认有 <code>margin-top 和 margin-bottom 的浏览器 UA 样式，尤其在父容器高度未显式设定时，margin: auto 垂直居中依赖于「块格式化上下文 + 高度计算」，但实际渲染中常因行内元素、字体基线、或匿名文本节点引入不可见间隙。
display: flex 居中时顶部/底部多出几像素空隙
这是最常见也最容易被忽略的坑：父容器若含有换行符、空格或注释，Flex 容器会把它们当作 text node 渲染，而这些节点默认按 vertical-align: baseline 对齐，拉高了整体基线位置，导致视觉上“没居中”。
- 删掉 HTML 中父容器标签之间的所有换行和空格，写成
<div class="wrap"><form>...</form></div> - 或者给父容器加
font-size: 0，再给子元素（如<form></form>）单独设font-size: 16px - 更稳妥的做法是：父容器用
display: flex; align-items: center; justify-content: center;，同时确保子元素是块级且无内联干扰
用 position: absolute 居中后仍偏移
很多人写 top: 50%; left: 50%; transform: translate(-50%, -50%); 却发现还是不对——问题往往出在祖先元素没设 position: relative，导致定位参考的是 viewport；或者登录框自身有 padding 或 border，而 transform 移动的是整个盒模型（含 padding/border），造成视觉偏差。
- 确认最近的非
static定位祖先是否设置了position: relative - 检查登录框是否设置了
box-sizing: border-box（推荐始终启用） - 如果用了
outline或box-shadow，它们不影响布局但可能干扰视觉对齐判断
表单内部输入框之间莫名有间隙
这不属于“居中间隙”，但用户常误以为是居中问题——其实是 <input> 和 <button></button> 默认为 display: inline-block，受父容器 font-size 和空白字符影响产生间隙。
- 统一设为
display: block并用margin控制间距 - 或保持
inline-block，但父容器加font-size: 0，子元素再重置font-size - 避免在标签间写换行或空格：
<input><input><button></button>连写，而非分行缩进
真正难调的不是方法，而是得同时盯住 HTML 结构、CSS 盒模型、字体渲染行为和浏览器默认样式四层叠加效果。哪怕只多一个看不见的换行符，都可能让 flex 居中偏移 2px。
