margin: 0 auto 是最直接有效的水平居中方案，适用于有明确宽度或 max-width 的块级元素；失效主因包括未设宽度、width: 100%、父容器为 flex/grid、元素脱离文档流；推荐用 max-width + margin: 0 auto 实现响应式居中。
margin: 0 auto 是最直接有效的方案，前提是登录框容器是块级元素且有明确宽度或 max-width。
为什么 margin: 0 auto 能用，但经常失效
它只对**块级元素**生效，而 <form> 默认就是块级，所以通常不用改 display。但失效的常见原因有：
- 忘了设
width或max-width—— 没宽度就没有“剩余空间”可分，auto就没意义 - 写了
width: 100%—— 宽度占满父容器，左右无空隙，margin: 0 auto看似写了，实则归零 - 父容器用了
display: flex或display: grid—— 这些布局会覆盖margin: auto的行为 - 登录框加了
float或position: absolute—— 一旦脱离文档流，margin: auto就不参与布局计算
推荐写法：用 max-width + margin: 0 auto
比固定 width 更健壮，兼顾响应式和居中逻辑：
.login-form {
max-width: 480px;
margin: 0 auto;
padding: 24px;
background: #fff;
border-radius: 8px;
}
这个写法在小屏下自动收缩，在大屏下稳定居中，且不依赖 JS 或复杂布局。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
注意：如果登录框外还套了一层 <div class="login-wrap">，那 margin: 0 auto 要加在这一层上，而不是 <form> 自身（除非它就是最外层容器）。
别把表单内元素居中和表单本身居中搞混
登录框水平居中后，里面的 <input>、<button> 默认还是左对齐。想让它们也居中，得单独处理：
- 给
<form>或其直接包裹<div>加text-align: center—— 适用于<button>、<label>等行内/行内块元素 - 如果
<input>是display: block，需额外设margin: 0 auto（并保证它有宽度，比如width: 100%或具体值） - 避免对
<input>直接设text-align: center来“假装居中”——这只会让输入文字居中，框本身仍靠左
真正容易被忽略的是：居中行为是否受祖先容器影响。比如父级用了 flex 却没意识到它会劫持子元素的 margin；或者重置了 body 的 margin 却忘了设 html, body { height: 100% }，导致后续用 flex 垂直居中时高度塌陷——这些细节往往在调试时才暴露出来。
