用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 规则冲突

用 position: absolute + transform 的真实限制

这套组合只适合必须脱离文档流的场景，比如模态框浮在遮罩层上。但它有几个硬约束：

立即学习“前端免费学习笔记（深入）”；

• 父容器（如遮罩层 <div class="overlay">）必须设 <code>position: relative，否则定位参考是视口，滚动就错位
• form 得写全：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) —— 少任何一项都会偏右下
• 缩放时，top: 50% 和 translate 的计算可能因字体/边框渲染偏差产生 1–2px 晃动，尤其 Windows + Chrome 下

真正卡住人的往往不是“怎么写”，而是“为什么没生效”：父容器没高度、被上级 flex 接管、定位上下文缺失、或表单元素类型误判（比如给行内元素加 margin: 0 auto）。先查这些，比反复调样式更省时间。