登录框居中失效八成因布局上下文被覆盖或约束未满足：margin: 0 auto需块级元素+明确width且父容器非flex/grid；Flex居中需父容器min-height: 100vh+display: flex+justify-content/align-items: center；absolute+transform需父容器relative定位且样式不冲突。
登录框居中失效，八成不是CSS写错了，而是布局上下文被意外覆盖或约束条件没满足。直接上最可靠、最常踩坑的几类场景。
为什么 margin: 0 auto 对登录表单没反应
这是最典型的“写了但不生效”。margin: 0 auto 只对块级元素起作用，且要求父容器允许它计算剩余空间。
- 检查
<form>或其外层<div class="login-wrap">是否设置了width或max-width—— 写width: 100%等于没写，因为没“剩余宽度”可分 - 确认父容器没启用
display: flex或display: grid，这两者会直接忽略margin: auto的居中逻辑 - 排除
float、position: absolute或display: inline-block等让元素脱离常规文档流的设置 - 如果用的是
<body>作父容器，记得加html, body { height: 100%; }，否则min-height: 100vh在某些旧版 Safari 下可能不触发
Flex 布局下 justify-content 和 align-items 失效的常见原因
Flex 是现代登录框居中的首选，但它的行为高度依赖父容器的高度和子元素的渲染模式。
- 父容器必须有明确高度支撑垂直居中，
min-height: 100vh比height: 100vh更安全（避免内容溢出时撑高后居中偏移） -
<form>自身若设了height: 100%或flex: 1，可能挤压内部元素导致视觉错位；建议只控制宽度，用max-width: 480px - 别给
<form>加margin或padding后再套 Flex 居中——这会让 align-items 计算基准偏移 - 如果登录框里用了
<input type="checkbox">或<button>，它们默认vertical-align: baseline，可能拉低整体对齐线；统一加display: inline-block+vertical-align: middle更稳
position: absolute + transform: translate(-50%, -50%) 总是偏一点
这个组合理论上精准，但实际中容易因定位上下文或字体渲染差异导致 1–2px 偏移。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器（比如
<div id="overlay">）设置了position: relative（或absolute/fixed），否则top: 50%参考的是视口而非父容器 -
transform: translate(-50%, -50%)必须写在同一个元素上，不能拆成两个类分别控制 X/Y - 如果登录框内文字用了非继承字体（如 label 是
"Microsoft YaHei"，而 input 没显式声明），baseline 错位会让整个框看起来“没居中” - 移动端 Safari 对
transform的 subpixel 渲染较敏感，可加will-change: transform缓解，但非必需
表单内部输入框和按钮不对齐怎么办
居中问题常被误认为是“整体没居中”，其实是子项渲染不一致造成的视觉偏差。
- 所有
<input>、<button>、<label>统一设display: inline-block，避免 inline 元素受空格/换行影响 - 强制统一
font-family和font-size，尤其注意input默认不继承父级 font-family - 重置
box-sizing: border-box，并显式设height（如height: 36px），避免 padding/border 导致高度不一致 - 不要用
line-height居中单行文本——它在多语言或字号缩放时极易失效；改用display: flex; align-items: center包裹每组label + input
真正卡住人的往往不是“怎么写”，而是“为什么写了没用”——绝大多数情况，是某个祖先元素悄悄启用了 Flex/Grid，或者某个 input 没继承字体，又或者 html/body 高度没透传下来。先查 computed styles，再逐层关掉可疑样式，比重写一遍更快。
