登录框水平居中用 margin: 0 auto（需块级元素+明确宽度）；水平垂直居中首选 flex 布局（display: flex + justify-content/align-items: center + min-height: 100vh）；input 与 label 垂直对齐应设 inline-block + flex 容器；绝对定位居中需 top/left: 50% + transform: translate(-50%, -50%) 且父容器 relative。
登录框整体水平居中用 margin: 0 auto 最直接
只要 <form> 或包裹它的 <div> 是块级元素（默认就是），设个明确宽度（比如 width: 400px 或 max-width: 480px），再加 margin: 0 auto 就能稳稳居中。常见错误是：width: 100% —— 没剩余空间可分，auto 就失效了；或者父容器用了 display: flex，会覆盖掉这个行为。
别给登录框加 float 或 position: absolute，这些会让 margin: 0 auto 完全不生效。
登录框在视口里水平+垂直居中首选 display: flex
父容器（比如 <body> 或一个全高 <div class="login-wrapper">）加三行 CSS：display: flex、justify-content: center、align-items: center，再配 min-height: 100vh 保证有高度可撑开。
<form> 自身不用写宽度，但建议加 max-width 防止在大屏上过宽；注意：子元素的 margin: auto 在 flex 容器里会失效，别指望它还能起作用。
立即学习“前端免费学习笔记（深入）”；
<input> 和 <label> 垂直对齐总差 1–2px？别硬调 margin 或 line-height
根本原因是 vertical-align: middle 对 <input> 失效——浏览器把文本输入框按字体 x-height 算基线，而 checkbox 当图片处理，两者基准不一致。
真正可控的做法是：
- 统一设
display: inline-block给<label>、<input>、<button> - 强制继承字体：
font-family: "Segoe UI", "Microsoft YaHei", sans-serif - 重置 box-sizing：
input, button { box-sizing: border-box; } - 每行 label + input 单独包一层
<div>并设display: flex; align-items: center，比整个表单设 flex 更语义清晰、响应式友好
绝对定位居中只在脱离文档流时才该用
比如登录框盖在遮罩层上，这时必须用 position: absolute。但只写 top: 50%; left: 50% 是错的——定位点是元素左上角，结果会偏右下。
必须补上：transform: translate(-50%, -50%)，且父容器得是 position: relative（否则参考系是视口，滚动就飘）。
这种写法对宽高未知的表单也有效，但要注意：它脱离文档流后，无法被屏幕阅读器自然感知，也不随内容高度自适应——如果登录框内容动态增减，容易切出视口。
最容易被忽略的是：居中不是“加个样式就行”，而是要先确认你居中的对象是什么——是整块 <form>？是里面的 <input>？还是文字本身？选错方法，不是样式没效果，是浏览器压根没按你想的方式渲染。
