如何用CSS实现表单中提交按钮的居中对齐

以下是调整后的完整代码，解决了按钮相对于<form>居中的问题，同时优化了布局细节，更符合现代CSS实践：

修改后的CSS #

.main-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

body {
  margin: 0;
  background-color: #C9D1C8;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h1 {
  font-size: 40px;
  margin: 0 0 10px;
}

p {
  font-size: 25px;
  font-style: italic;
  margin: 0 0 30px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 用gap统一表单元素间距，比单独设置margin更可控 */
  background-color: #5B7065;
  width: 50vw;
  min-height: 65vh; /* 替换固定height为min-height，避免小屏幕内容溢出 */
  padding: 25px;
  border-radius: 5px;
}

label {
  color: #04202C;
  font-size: 20px;
  margin: 0 0 5px 5px;
}

.input-group {
  display: flex;
  flex-direction: column;
}

input {
  width: 100%; /* 去掉固定margin-left，通过父容器padding控制位置 */
  border-radius: 5px;
  border: none;
  padding: 15px;
  background-color: #C9D1C8;
  color: #304040;
  font-style: italic;
}

.form-submit-container {
  display: flex;
  justify-content: center; /* 核心：让按钮在容器内水平居中 */
  margin-top: auto; /* 利用flex特性，将按钮推到表单底部 */
}

button {
  width: 10vw;
  height: 30px;
  border-radius: 50px 0;
  border: none;
  cursor: pointer;
  background-color: #04202C;
  color: #C9D1C8;
  opacity: 0.8;
  transition: opacity 0.2s;
}

button:hover {
  opacity: 1; /* 增加hover效果，提升交互体验 */
}

.footer-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
  opacity: 0.2;
}

修改后的HTML #

<main class="main-flex-container">
  <h1 id="page-title">Survey Form</h1>

  <p id="page-description">Brief description</p>

  <form method="POST" id="whole-form">
    <div class="input-group">
      <label for="question-1">Question 1</label>
      <input id="question-1" name="question-1-box" type="text" placeholder="Question 1">
    </div>

    <div class="input-group">
      <label for="question-2">Question 2</label>
      <input id="question-2" name="question-2-box" type="text" placeholder="question 2">
    </div>

    <div class="input-group">
      <label for="question-3">Question 3</label>
      <input id="question-3" name="question-3-box" type="text" placeholder="question 3" required>
    </div>

    <div class="input-group">
      <label for="question-4">Question 4</label>
      <input id="question-4" name="question-4-box" type="text" placeholder="question 4" required>
    </div>

    <div class="form-submit-container">
      <button>Submit</button>
    </div>
  </form>
</main>
<footer class="footer-flex-container">Last updated: 2/05/2023</footer>

关键修改说明 #

• 按钮容器新增form-submit-container类，通过display: flex; justify-content: center;实现按钮在容器内水平居中，容器作为<form>的flex子元素，自然相对于表单居中。
• 给按钮容器添加margin-top: auto;，借助flex布局特性，自动占据表单内剩余空间，将按钮推至表单底部。
• 新增input-group容器统一输入项布局，替换input的固定margin-left为表单padding+input的width:100%，实现自适应对齐。
• 将表单的height改为min-height，避免小屏幕下内容溢出。
• 用gap属性统一表单元素间距，布局逻辑更简洁。
• 修正input标签的闭合方式（input为自闭合标签，无需</input>）。

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