如何通过CSS实现两个按钮屏幕居中并满足响应式要求

你调整padding无法实现居中的原因是padding仅控制按钮内部的内容边距，和元素在页面中的排版位置无关，以下是可实现屏幕居中+响应式效果的完整修改方案：

核心修改点 #

• 给最外层div添加容器类，通过flex布局实现全局垂直水平居中
• 调整按钮宽度规则，增加响应式适配逻辑
• 修复原有代码中选择器不匹配、HTML属性语法错误的问题

完整修改后代码 #

CSS代码 #

/* 新增父容器样式，实现全屏居中 */
.btn-container {
  min-height: 100vh; /* 占满整个视口高度 */
  display: flex;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  margin: 0;
  padding: 20px; /* 小屏幕下避免按钮贴边 */
  box-sizing: border-box;
}

.btn-group-vertical button { 
  background-color: #0b0e0d; 
  border: 1px solid rgb(239, 240, 239);
  color: white;
  padding: 10px 24px 24px 30px;
  cursor: pointer;
  width: 100%; /* 宽度占满父容器 */
  max-width: 280px; /* 最大宽度限制，避免大屏幕按钮过宽 */
  display: block;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 50px;
}

/* 修复选择器不匹配问题 */
.btn-group-vertical button:not(:last-child) {   
  border-bottom: none;
}

.btn-group-vertical button:hover {    
  background-color: #ffffff; 
  color: #0b6d11;
}

/* 响应式适配：小于768px的设备调整按钮参数 */
@media (max-width: 768px) {
  .btn-group-vertical button {
    max-width: 90vw;
    margin-bottom: 30px;
  }
}

HTML代码 #

<!-- 给最外层div添加btn-container类 -->
<div class="btn-container">
  <div>
    <div class="btn-group-vertical"> 
      <!-- 修复id属性的语法错误，去掉多余的引号和空格 -->
      <button type="button" id="stbButton">First Button</button>
      <button type="button" id="cdbButton">Second Button</button>
    </div> 
  </div>
</div>

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