按钮样式调试求助：btn2精准居中及与h2间距优化

问题说明 #

• 类名为btn2的按钮尝试用margin-left:85vh实现居中，无法精准定位到页面正中间
• 该按钮与上方文本为“Train your app with Lobe”的h2元素间距过大，需要调整两者间的间距

解决方案 #

1. 实现按钮精准居中

抛弃固定margin-left的方案，通过父容器的Flex布局实现自适应居中：

• 为.body2添加Flex布局属性，设置垂直排列并让子元素水平居中，按钮会自动适配不同屏幕尺寸，始终保持在页面正中间。

2. 调整h2与按钮的间距

当前h2的padding:50px会生成较大的上下内边距，可修改该值，或给按钮添加margin-top来控制两者间距，按需调整数值即可。

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
}

.header .container {
  display: flex;
  justify-content: space-between;
  margin: 30px;
}

.container a {
  text-decoration: none;
  margin-right: 100px;
  margin-left: 60px;
  letter-spacing: 3px;
  font-size: 15px;
}

.container .main-btn {
  background-color: #04ddb2;
  width: 80px;
  height: 40px;
  margin-right: 16px;
  border-radius: 8px;
  border: none;
}

.main .mainbody {
  font-size: 35px;
  color: #333;
  text-align: center;
  padding: 70px;
}

.main .mainbody span {
  color: #04ddb2;
}

.main .mainbody p {
  font-size: 25px;
  text-align: center;
}

.main .video {
  margin-left: 62vh;
}

.main .body2 h2 {
  font-size: 30px;
  color: #333;
  text-align: center;
  /* 修改h2的padding，减少上下间距 */
  padding: 20px 0;
}

/* 给.body2添加Flex布局，实现子元素居中 */
.main .body2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.body2 .btn2 {
  /* 移除原来的margin-left */
  /* margin-left: 85vh; */
  /* 添加margin-top控制与h2的间距 */
  margin-top: 10px;
  background-color: #04ddb2;
  width: 200px;
  height: 70px;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  color: #ffff;
}

改动说明 #

• 给.body2添加display: flex; flex-direction: column; align-items: center;：让h2和按钮垂直排列，且都水平居中，彻底解决按钮无法精准居中的适配问题。
• 修改.main .body2 h2的padding为20px 0：减少h2的上下内边距，直接缩小与按钮的间距；也可保留原h2的padding，仅通过.btn2的margin-top调整间距，按需选择即可。
• 移除.body2 .btn2的margin-left:85vh：避免固定值导致的不同屏幕尺寸下的偏移问题。

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