用 margin: auto 居中块级元素必须显式设置 width 或 max-width，否则因默认宽度100%导致左右 margin 为0；推荐 width: 360px 或 max-width: 90%，配合 margin: 0 auto。
用 margin: auto 居中块级元素时必须设宽度
纯 HTML 无法居中，必须配合 CSS；很多人写完 <div class="login"> 就加 margin: auto，但没生效——因为默认块级元素宽度是 100%，margin: auto 在宽度占满时无效。必须显式设置 width（比如 width: 400px）或用 max-width，再配 margin: 0 auto。
常见错误现象：div 贴左、无任何居中迹象；检查 computed style 会发现 margin 确实被解析了，但左右值为 0——根源就是 width 未收缩。
- 推荐写法：
width: 360px或max-width: 90%（兼顾小屏） - 避免用
width: 100%后又想居中——逻辑冲突 - 如果父容器是
<body>，确保它没被重置margin或padding（某些 CSS 重置库会清空body的默认外边距）
Flex 布局居中更可靠，但需注意父容器高度
用 display: flex + justify-content: center + align-items: center 是目前最稳的居中方式，但新手常忽略：父容器必须有明确高度，否则垂直居中失效。
使用场景：整个视口居中（如登录页首屏），此时父容器通常是 <body> 或一个全高 <main>。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
min-height: 100vh（不是height: 100vh，防内容超长时遮挡） - 子容器（登录框）无需设宽高，
margin: auto在 flex 里会自动失效，靠justify/align-items控制 - 兼容性：IE10+ 支持，若需支持 IE9 及以下，退回传统定位方案
position: absolute 居中要避开“脱离文档流”陷阱
用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%) 能精准居中，但登录框会脱离文档流——这意味着它不再占据空间，后面的内容会上移顶替它的位置。
错误现象：登录框下面的页脚突然跑到顶部；或者多个绝对定位元素互相覆盖。
- 必须确保该登录框是独立模块，不依赖与其他元素的流式关系
-
transform是关键，不能只靠top/left，否则只是左上角对齐视口中心 - 若父容器不是
<body>，要确认其position是relative、absolute或fixed，否则绝对定位会向上找最近的定位祖先，可能错位
响应式登录框别只靠固定像素宽度
写死 width: 400px 在手机上会溢出屏幕，但直接改 width: 100% 又失去“框”的视觉感。真正可用的方案是组合断点与相对单位。
性能影响几乎为零，但能显著提升小屏体验——用户不用左右拖拽才能看到提交按钮。
- 基础写法：
width: 90%，max-width: 420px，min-width: 300px - 在
@media (max-width: 480px)中把padding从24px降到16px，避免文字挤到边缘 - 输入框用
width: 100%，但加box-sizing: border-box，否则 padding 会让它撑破父容器
