最稳的居中解法是父容器设 display: flex、justify-content: center 和 align-items: center；margin: 0 auto 仅水平居中且依赖块级+定宽，flex 下失效；需配合 min-height: 100vh 保障垂直居中效果。
直接给父容器加 display: flex，再配 justify-content: center 和 align-items: center，是最稳、最省事的解法。
为什么不用 margin: 0 auto 单独居中？
因为 margin: 0 auto 只管水平居中，对垂直方向完全无效；而且它要求登录框必须是块级元素 + 有明确宽度（比如 width: 400px 或 max-width: 480px），一旦父容器用了 flex 或 grid，这个写法就会被覆盖失效。
- 常见错误：给
<form></form>写了margin: 0 auto，但父容器是display: flex—— 此时 margin 不起作用 - 另一个坑：设了
width: 100%，那左右没剩余空间，auto就分不出边距 - 如果父容器高度不固定（比如内容撑开），
margin: 0 auto更没法做垂直居中
display: flex 居中要配哪些关键样式？
核心就三句，全写在父容器（比如 <div class="login-container">）上：
<ul>
<li>
<code>display: flex：启用弹性布局
justify-content: center：主轴（默认水平）居中 → 解决水平问题align-items: center：交叉轴（默认垂直）居中 → 解决垂直问题别漏掉父容器的高度控制：如果想让登录框在视口里上下居中，父容器得有高度支撑，min-height: 100vh 是最常用也最可靠的写法。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
用 position: absolute 居中要注意什么？
适合登录框需要脱离文档流的场景（比如遮罩层上的弹窗），但容易出偏移：
- 子元素必须设
position: absolute，父容器得有position: relative（或absolute/fixed）作为定位上下文 - 只写
left: 50%; top: 50%会让左上角落在中心点，结果整个框偏右下角 - 必须补上
transform: translate(-50%, -50%)把自身宽高一半“挪回来” - 这个组合对宽高未知的表单也有效，但滚动时可能定位漂移，需额外处理
文本和输入框内部怎么居中？
这是常被混淆的点：父容器居中 ≠ 表单内文字或输入框内容居中。
- 让
<input>里的文字水平居中，直接给它加text-align: center - 让按钮（
<button></button>）在表单里水平居中，不是给按钮设margin: 0 auto（它默认是 inline-level），而是给它的父<div class="form-group"> 加 <code>text-align: center - 若要精确控制
<label></label>和<input>的垂直对齐，vertical-align: middle或把它们包进 flex 容器更可靠
真正麻烦的从来不是“怎么写一行居中代码”，而是搞清你要居中的对象是谁、它在什么上下文中、是否受其他布局模式干扰——尤其是当多个居中逻辑嵌套时，flex 的父子隔离性反而成了最不容易翻车的选择。
