水平居中登录框最直接用margin: 0 auto，需块级容器+明确宽度（推荐max-width）；全屏居中优先选flex布局（justify-content+align-items）；绝对定位需配合transform(-50%,-50%)。
登录框水平居中用 margin: 0 auto 最直接
只要 <form> 或其外层容器是块级元素（默认就是），设个明确宽度再加 margin: 0 auto 就能稳住水平位置。常见错误是漏写 width，或写了 width: 100%——后者没剩余空间可分，auto 就失效了。
-
max-width: 480px比固定width更实用，兼顾响应式和居中效果 - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给登录框加
float或position: absolute，这些会让margin: 0 auto完全不生效
同时水平+垂直居中优先选 Flex 布局
全屏登录页、模态弹窗这类场景，display: flex + justify-content: center + align-items: center 是最省心的组合。它不依赖子元素尺寸，也不用算像素，浏览器原生支持稳定。
- 父容器（比如
<body>或一个包裹<form>的<div>）必须有高度支撑垂直居中，min-height: 100vh是可靠写法 -
<form>自身不用设width，但建议加max-width防止在大屏上过宽 - IE10+ 支持，IE9 及更早版本不支持；如果项目仍需兼容 IE9，得换方案
用 position: absolute 居中时 transform 缺一不可
当登录框需要脱离文档流（比如浮在遮罩层上），position: absolute 合理，但只写 left: 50% 和 top: 50% 会导致左上角顶在视口中心，实际偏右下。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 子元素必须设
position: absolute，且配left: 50%、top: 50% - 父容器得设
position: relative（或其他非static值），否则定位参考是视口 - 必须补上
transform: translate(-50%, -50%)，把自身宽高一半“挪回来” - 这个组合对宽高未知的表单也有效，但滚动时若父容器没固定定位，可能错位
别把文本居中和块居中混用
<label>、<button>、提示文字这些默认是行内或行内块，单独给它们加 margin: 0 auto 没用——行内元素不响应块级外边距。
立即学习“前端免费学习笔记（深入）”；
- 让按钮居中：给它的直接父容器（比如包着
<button>的<div>）设text-align: center - 让整个表单内所有文字水平居中：同样在表单父容器上设
text-align: center，但注意这会影响<label>和<input>的对齐方式 - 若需精确控制每个
<label>和<input>的垂直对齐，得用vertical-align或 Flex 子项对齐，不能只靠居中父容器
真正容易被忽略的是父容器的高度来源和定位上下文。Flex 方案里 min-height: 100vh 不是可有可无的装饰，而是垂直居中的必要前提；绝对定位方案里，少一个 position: relative 或漏掉 transform，视觉上就差整整半个盒子的距离。
