Flexbox布局下输入框无法居中对齐问题求助（附代码）

嘿，我来帮你搞定这个输入框居中的问题！你已经用到了flex布局的flex-direction:column、justify-content:center和align-items:center，思路完全没问题，但大概率是容器高度不足导致垂直居中没生效——默认情况下，div的高度是由内部内容撑开的，justify-content:center在垂直方向上根本没有足够空间发挥作用。

解决方案：给容器设置足够高度 #

我们只需要给.input-container添加高度（比如占满整个视口高度），同时清除body和html的默认边距，避免干扰布局：

/* 先清除默认样式，避免浏览器自带边距搞破坏 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.input-container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中 */
  align-items: center; /* 水平方向居中 */
  min-height: 100vh; /* 让容器占满整个视口高度 */
  gap: 10px; /* 可选：给输入框之间加个小间距，看起来更舒服 */
}

/* 可选：给输入框加基础样式，优化视觉体验 */
.login, .password {
  padding: 8px 12px;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

完整HTML示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="/webcam.js"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .input-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      gap: 10px;
    }
    .login, .password {
      padding: 8px 12px;
      width: 200px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  </style>
</head>
<body class="body">
  <div class="input-container">
    <input class="login" placeholder="login">
    <input class="password" placeholder="password">
  </div>
</body>
</html>

关键说明 #

• min-height:100vh：让容器至少占满当前浏览器窗口的高度，确保垂直居中能看到效果。
• gap:10px：给两个输入框之间添加间距，避免挤在一起（可选但推荐）。
• 清除html和body的默认边距：防止页面出现不必要的留白，影响整体居中效果。

这样修改后，你的输入框就能在页面中完美实现水平+垂直居中啦！

内容的提问来源于stack exchange，提问作者Ildar2002