登录框居中需同时满足多个条件：表单须为块级元素、设明确宽度或max-width、父容器不能是flex/grid、需有高度来源（如min-height: 100vh）；flex需justify-content与align-items配合；absolute需left/top+transform回拉且父设relative。
登录框居中不是单一 CSS 属性能搞定的事，它取决于你用什么定位方式、父容器是否撑开高度、表单本身是不是块级元素——错一个条件，margin: 0 auto 就失效，flex 就不垂直居中，position: absolute 就偏出屏幕。
为什么 margin: 0 auto 不生效？
这是最常踩的坑：以为给 <form> 加了 margin: 0 auto 就能居中，结果纹丝不动。
- 表单必须是块级元素（
<form>默认是，没问题） - 必须设明确宽度或
max-width，比如width: 400px或max-width: 480px；写width: 100%直接废掉auto - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 不能同时加
float、position: absolute或display: inline-block，这些会让margin: auto失效
用 flex 实现水平+垂直居中时，为什么还是靠上？
写了 display: flex; justify-content: center; align-items: center，但登录框卡在顶部，说明父容器没高度。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器（比如
<body>或包裹<form>的<div>）必须有可计算的高度，min-height: 100vh是最稳妥的选择 - 别只给
html或body设height: 100%，得一起设html, body { height: 100%; margin: 0; padding: 0; }，否则100%无参照 -
<form>自身不需要设宽高，但加max-width能防大屏过宽，比如max-width: 480px - 如果父容器里还有其他内容（比如页眉），
flex会把整个流拉平，此时改用align-self: center或包一层空<div>更可控
position: absolute 居中后位置飘移怎么办？
用 left: 50%; top: 50% 后，登录框右下角刚好在视口中心——因为定位锚点是左上角，不是中心。
立即学习“前端免费学习笔记（深入）”；
- 必须配
transform: translate(-50%, -50%)，缺一不可 - 父容器得有定位上下文，即设
position: relative（或absolute/fixed），否则left/top会相对于视口定位 - 若页面可滚动，且登录框需始终居中（如遮罩层），用
position: fixed替代absolute - 注意可访问性：
position: fixed+z-index过高可能遮挡焦点顺序，测试 Tab 键导航是否正常
真正麻烦的不是选哪种方法，而是混用时的隐性冲突——比如在 flex 父容器里又给子表单加 margin: 0 auto，或者给 absolute 元素设 display: flex 却忘了它已脱离文档流。动手前先确认「定位方式」和「高度来源」这两个支点稳不稳，比反复调样式更省时间。
