求助：CSS表单无法居中页面，已尝试其他方案仍无效

嘿，我知道折腾一小时搞不定居中有多烦躁，咱们来快速定位问题并解决它！

首先看你当前的代码，问题出在这几点：

• .form-div 设置了 width: 100%，导致它占满整个页面宽度，自然没法在页面水平居中
• 如果想实现垂直居中，你的 body 没有设置高度，display: table 的方法无法生效

下面给你两种实用的解决方案，按需选择：

方案1：仅水平居中表单容器 #

适合只想让表单在页面水平居中，垂直方向随内容布局的场景：

修改你的CSS代码如下：

body {
  background-color: #f4f4f4;
  font: normal 16px Arial, Helvetica, sans-serif;
  line-height:1.6em;
  text-align: center;
  margin: 0; /* 去掉body默认边距 */
}

.form-div {
  width: 320px; /* 给表单容器一个合适的宽度 */
  margin: 2rem auto; /* 上下留间距，左右自动水平居中 */
  background-color: red;
  padding: 1.5rem; /* 增加内边距让内容不贴边 */
}

form {
  text-align: center;
}

form input[type="email"], form input[type="password"] {
  border:none;
  background:#f4f4f4;
  border-bottom:1px solid black;
  outline:none;
  line-height:28px;
  font-size:16px;
  margin: 0.5rem 0; /* 给输入框增加上下间距 */
  width: 100%; /* 让输入框占满容器宽度 */
  box-sizing: border-box; /* 避免内边距撑大宽度 */
}

input[type="submit"] {
  background-color:#333;
  color:#fff;
  padding:10px 15px;
  border:none;
  margin-top: 1rem;
  cursor: pointer;
}

方案2：垂直+水平双向居中（推荐） #

如果想让表单完全居中在页面正中央，用Flex布局是最简洁可靠的方式：

修改后的CSS代码：

body {
  background-color: #f4f4f4;
  font: normal 16px Arial, Helvetica, sans-serif;
  line-height:1.6em;
  /* 开启Flex布局，让子元素垂直水平居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 让body占满整个视口高度 */
  margin: 0; /* 去掉默认边距 */
}

h1 {
  margin-bottom: 2rem; /* 给标题和表单之间留间距 */
}

.form-div {
  width: 320px;
  background-color: red;
  padding: 1.5rem;
}

form {
  text-align: center;
}

form input[type="email"], form input[type="password"] {
  border:none;
  background:#f4f4f4;
  border-bottom:1px solid black;
  outline:none;
  line-height:28px;
  font-size:16px;
  margin: 0.5rem 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
}

input[type="submit"] {
  background-color:#333;
  color:#fff;
  padding:10px 15px;
  border:none;
  margin-top: 1rem;
  cursor: pointer;
}

你的HTML代码不需要修改，直接用原来的就行：

<!DOCTYPE html> 
<html> 
<head> 
  <link rel = "stylesheet" href = "CSS/Login.css"> 
</head> 
<body> 
  <h1> Admin Panel </h1> 
  <div class = "form-div"> 
    <form action = "Login.php" method = "POST"> 
      <input type = "email" name = "emailPost" placeholder = "Enter email..." required> 
      <input type = "password" name = "passwordPost" placeholder = "Enter password..." required> 
      <input type = "submit" value = "Submit"> 
    </form> 
  </div>
</body>
</html>

这两种方案都能完美解决你的居中问题，Flex布局是现在前端的主流方案，代码更简洁也更容易维护～

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