如何通过HTML代码设置登录框上下居中-html教程-PHP中文网

推荐用flexbox实现：父容器设display: flex、justify-content: center和align-items: center，并配min-height: 100dvh确保适配安全区；避免只写justify-content或遗漏高度声明，也勿混用flex-direction: column。

如何通过html代码设置登录框上下居中

用 Flexbox 实现登录框垂直水平居中（推荐）

现代浏览器下最可靠、代码最少的方式就是用 display: flex。父容器设为 flex，再用 justify-content 和 align-items 两行搞定，不用计算高度、不依赖 JS。

常见错误是只加了 justify-content: center 却漏掉 align-items: center，结果只水平居中、上下还是贴顶。

父容器必须有明确高度（比如 height: 100vh），否则 flex 无法判断“居中到哪”
登录框本身不需要设 margin: auto 或绝对定位
避免给父容器同时设 flex-direction: column，否则 justify-content 行为会变（它控制主轴，而 column 下主轴是纵向）

<div class="login-container">
  <form class="login-box">
    <input type="text" placeholder="用户名"><input type="password" placeholder="密码">
</form>
</div>

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.login-box {
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

用绝对定位 + transform 居中（兼容旧版 Chrome/Safari）

当项目需支持 iOS Safari 9 或 Android Browser 4.4 等老环境时，flex 可能有渲染 bug，这时回退到 position: absolute 更稳。

关键点在于：不能只靠 top: 50%，因为这会让元素顶部落到视口中间，得用 transform: translateY(-50%) 把自己拉回一半高度。

父容器必须设 position: relative 或 position: absolute，否则子元素的 absolute 会相对于 body 定位
left: 50% + transform: translateX(-50%) 同理用于水平居中
如果登录框宽高不固定（比如内容动态增减），transform 仍有效；但 margin-top: -XXpx 这种写死负边距的方式会失效

.login-container {
  position: relative;
  height: 100vh;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}