用 margin: auto 实现块级元素水平居中需先设明确宽度（如 width: 320px），保持 display: block，再加 margin: 0 auto；Flexbox 方案更可靠，需在父容器设 display: flex、justify-content: center、align-items: center 并配 min-height: 100vh。
用 margin: auto 实现块级元素水平居中
HTML 登录框本身是 <div> 或 <form> 这类块级元素，默认占满父容器宽度，直接加 margin: auto 不生效——必须先让它“有明确宽度”且“脱离流式默认行为”。
常见错误是只写 margin: auto 却没设 width，或者把登录框放在未设宽高的 <body> 里，导致浏览器无法计算左右剩余空间。
- 给登录框容器（如
<div class="login-box">）设置固定或最大宽度：width: 320px或max-width: 400px - 确保它不是
display: inline或float元素，保持默认display: block - 加上
margin: 0 auto（上下为 0，左右自动分配） - 父容器（比如
<body>）不需要额外样式，但不能是display: flex或text-align: center混用，否则行为冲突
用 Flexbox 让登录框真正居中（含垂直）
如果还想让登录框在视口里垂直居中，margin: auto 就不够用了。Flexbox 是目前最可靠、语义最清晰的方式，但要注意作用对象是父容器，不是登录框本身。
典型错误是给 .login-box 加 display: flex，结果发现没变化——其实该改的是它的直接父级，比如 <body> 或一个包裹 <div>。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给父容器设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 登录框仍需有明确宽度（否则会撑满整个 flex 容器），
width或max-width不可省 - 若父容器高度不确定（比如内容少时
<body>高度不足视口），需加min-height: 100vh保证垂直居中有空间 - 避免在登录框上再设
margin，容易和 flex 的对齐逻辑打架
避免 text-align: center 的误用
有人会给 <body> 或父 <div> 加 text-align: center，以为能居中登录框——这只能居中**行内元素**（如 <span>、<img>），对 <div> 这类块级元素完全无效，除非同时加 display: inline-block。
这种写法不仅多此一举，还会带来副作用：如果登录框内部有按钮、文字等行内内容，它们也会被强制居中，破坏布局预期。
- 不要对块级登录容器使用
text-align来试图控制它自身位置 - 如果真要用
inline-block方案，必须同步设vertical-align: middle和父容器line-height匹配高度，复杂度远高于 flex -
text-align只应在登录框内部用于对齐文字或按钮，而非定位整个框
响应式场景下 width 和 max-width 的取舍
固定 width: 320px 在小屏手机上可能溢出，而纯 max-width: 100% 又可能在大屏上过宽。真正健壮的做法是组合使用，并配合 padding 控制内边距。
容易忽略的点是：移动端键盘弹出时，视口高度会变，flex + 100vh 可能导致登录框被顶出可视区；此时 min-height: 100% 比 100vh 更稳妥。
- 推荐写法：
width: 90%; max-width: 400px;，兼顾小屏适配与大屏约束 - 如果登录框有
padding，记得用box-sizing: border-box，否则宽度会超出预期 - 在媒体查询中可微调：
@media (max-width: 480px) { width: 95%; } - 避免用
left: 50%; transform: translateX(-50%)这类绝对定位方案——它绕过文档流，对无障碍和 SEO 不友好，且需额外处理父容器position
