表单设置display: table时，如何让提交按钮在表单整体居中？

问题出在你把提交按钮直接放在display:table的form容器里，浏览器会自动给按钮套一层匿名的表格行和单元格，导致margin:auto只能在这个小单元格里居中，而不是相对于整个表单宽度居中。

给你两种适配table布局的解决方法：

方法1：用表格标题实现底部居中 #

把按钮放在一个设置为表格标题的容器里，让它在表格下方自动居中：

HTML代码 #

<form>
  <div class="user-name">
    <label for="user-name">用户名</label>
    <input type="text" name="user-name" id="user-name" />
  </div>
  <div class="password">
    <label for="password">密码</label>
    <input type="password" name="password" id="password" />
  </div>
  <div class="submit-wrap">
    <input type="submit" value="提交" />
  </div>
</form>

CSS代码 #

form {
  display: table;
}
form > div {
  display: table-row;
}
form > div > label {
  display: table-cell;
  padding-right: 10px;
}
form > div > input {
  display: table-cell;
}
.submit-wrap {
  display: table-caption;
  caption-side: bottom; /* 把标题放在表格下方 */
  padding-top: 10px; /* 和表单内容拉开点距离 */
}

方法2：用跨列单元格实现居中 #

把按钮放在一个占满表格宽度的单元格里，让它在整个表单范围内居中：

HTML代码 #

<form>
  <div class="user-name">
    <label for="user-name">用户名</label>
    <input type="text" name="user-name" id="user-name" />
  </div>
  <div class="password">
    <label for="password">密码</label>
    <input type="password" name="password" id="password" />
  </div>
  <div class="submit-row">
    <div class="submit-cell">
      <input type="submit" value="提交" />
    </div>
  </div>
</form>

CSS代码 #

form {
  display: table;
}
form > div {
  display: table-row;
}
form > div > label,
.submit-cell {
  display: table-cell;
  padding-right: 10px;
}
.submit-cell {
  text-align: center;
  width: 100%; /* 强制占满表格宽度 */
  padding-top: 10px;
}

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