用display: flex实现登录框自适应居中需父容器设display: flex、justify-content: center、align-items: center和min-height: 100vh；常见失效原因包括父容器无高度、被上级flex/grid接管或子元素脱离文档流。
用 display: flex 在父容器上设 justify-content: center 和 align-items: center，再配 min-height: 100vh，基本就稳了。其他方案要么要算像素、要么一缩放就偏移。
为什么 margin: 0 auto 只能水平居中，还经常失效
它只分配左右外边距，对垂直方向完全没作用。而且生效必须同时满足三个条件：
-
form必须有明确的width或max-width（width: 100%不行，没剩余空间可分） - 父容器不能是
display: flex或display: grid，否则布局规则会接管margin: auto -
form不能脱离文档流——加了float、position: absolute或display: inline-block都会让它失效
display: flex 居中必须设 min-height: 100vh，不是 height: 100vh
align-items: center 要垂直对齐，得有高度基准。只写 height: 100vh 看似一样，但当内容极少时，某些浏览器可能渲染出高度塌陷；min-height 更稳妥。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 推荐把
flex布局加在或一个包裹<form></form>的<div class="login-wrapper"> 上 <li> <code>form自身不用设宽高，但建议加max-width: 480px防大屏过宽 - 别在
form上再写margin: 0 auto或text-align: center，和 flex 规则冲突 - 父容器（如遮罩层
<div class="overlay">）必须设 <code>position: relative，否则定位参考是视口，滚动就错位 -
form得写全：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)—— 少任何一项都会偏右下 - 缩放时，
top: 50%和translate的计算可能因字体/边框渲染偏差产生 1–2px 晃动，尤其 Windows + Chrome 下
用 position: absolute + transform 的真实限制
这套组合只适合必须脱离文档流的场景，比如模态框浮在遮罩层上。但它有几个硬约束：
真正卡住人的往往不是“怎么写”，而是“为什么没生效”：父容器没高度、被上级 flex 接管、定位上下文缺失、或表单元素类型误判（比如给行内元素加 margin: 0 auto）。先查这些，比反复调样式更省时间。
