如何在fieldset内垂直居中提交与重置按钮

嘿，我看你在尝试让fieldset里的提交和重置按钮垂直居中时碰了壁，用vertical-align: middle;在div上没生效对吧？这很正常——因为vertical-align属性默认只对行内元素、行内块元素或表格单元格生效，而div是块级元素，直接这么设置自然不会起作用。下面给你两种简单有效的解决方法：

方法一：用Flexbox布局（推荐，现代浏览器都支持） #

Flexbox是现在做居中布局最省心的方式，只需要给包含按钮的fieldset加几个样式，就能轻松实现垂直+水平居中：

h1 { text-align: center; } 
fieldset { 
  width: 85%; 
  margin: 5px auto; 
  border: 2px solid #b0b0b0; 
  border-radius: 15px; 
} 
label { float: left; width: 20%; } 
#personalDetailsSet { background-color: #c4d7f5; } 
#personalDetails, #bookingDetails { background-color: #f0f0ff; } 
#bookingDetailsSet { background-color: #f5dfc4; } 
#password { width: 55ch; } 
.form-set { padding: 2px 0; } 
#single-room-div { margin-top: 15px; } 
.radio-set { margin-bottom: 15px; }

/* 新增/修改的样式 */
fieldset:last-of-type {
  display: flex;
  align-items: center; /* 垂直居中子元素 */
  justify-content: center; /* 可选：让按钮水平居中 */
  min-height: 80px; /* 设置一个最小高度，让垂直居中效果更明显 */
}

#submit-reset-div {
  /* 删掉原来的vertical-align: middle; */
}

解释一下：display: flex把fieldset变成flex容器，align-items: center会让容器内的子元素（也就是你的按钮div）在垂直方向上居中，justify-content: center可以顺便让按钮在水平方向也居中，按需选择就行。

方法二：用表格布局（兼容旧浏览器） #

如果你需要兼容一些比较老的浏览器，表格布局也是个可行的方案：

/* 其他原有样式保持不变 */

/* 新增/修改的样式 */
fieldset:last-of-type {
  display: table;
  width: 85%; /* 和其他fieldset保持一致宽度 */
  height: 80px; /* 必须设置高度才能看到垂直居中效果 */
}

#submit-reset-div {
  display: table-cell;
  vertical-align: middle; /* 现在这个属性就生效了 */
  text-align: center; /* 可选：水平居中按钮 */
}

这里我们把fieldset模拟成表格，div模拟成表格单元格，这样vertical-align: middle就能正常工作，实现垂直居中。

你可以根据自己的需求选其中一种方法，替换掉原来的相关样式，就能看到按钮在fieldset里垂直居中的效果啦~

内容来源于stack exchange