登录框居中需同时满足多个条件：表单须为块级元素、设明确宽度或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></form> 加了 margin: 0 auto 就能居中，结果纹丝不动。

• 表单必须是块级元素（<form></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）演示文稿。

下载

• 父容器（比如 或包裹 <form></form> 的 <div>）必须有可计算的高度，<code>min-height: 100vh 是最稳妥的选择
• 别只给 html 或 body 设 height: 100%，得一起设 html, body { height: 100%; margin: 0; padding: 0; }，否则 100% 无参照
• <form></form> 自身不需要设宽高，但加 max-width 能防大屏过宽，比如 max-width: 480px
• 如果父容器里还有其他内容（比如页眉），flex 会把整个流拉平，此时改用 align-self: center 或包一层空 <div> 更可控 <h3> <code>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 却忘了它已脱离文档流。动手前先确认「定位方式」和「高度来源」这两个支点稳不稳，比反复调样式更省时间。