通过 Flexbox 布局，将每个“标题+按钮组”设为独立容器，并用 display: flex 和 justify-content: center 实现整体水平居中与侧向排列。
通过 flexbox 布局，将每个“标题+按钮组”设为独立容器，并用 `display: flex` 和 `justify-content: center` 实现整体水平居中与侧向排列。
要实现标题在上、按钮垂直堆叠、多组按钮水平并排且整体居中的效果，关键在于语义化结构 + 两层 Flexbox 控制：外层控制组间横向布局与居中，内层控制单组内标题与按钮的纵向排列。
首先，修正 HTML 结构：原 .button-default 和 .button-hovered 应各自包裹为独立的 .button-container，确保每组标题与按钮逻辑自包含：
<h2 class="section-title">BUTTONS</h2>
<div class="buttons">
<div class="button-container button-default">
<small class="btn-label">Default</small>
<button>Primary Button</button>
<button>Secondary Button</button>
</div>
<div class="button-container button-hovered">
<small class="btn-label">Hovered</small>
<button>Primary Button</button>
<button>Secondary Button</button>
</div>
</div>
接着，应用以下 CSS（含居中增强）：
.buttons {
display: flex;
justify-content: center; /* 关键：让所有容器整体水平居中 */
gap: 2rem; /* 组间间距，推荐使用 rem 提升可维护性 */
flex-wrap: wrap; /* 可选：响应式时自动换行 */
}
.button-container {
display: flex;
flex-direction: column;
align-items: center; /* 让内部按钮也水平居中（相对于本组） */
gap: 0.75rem; /* 标题与按钮、按钮之间的垂直间距 */
}
/* 可选优化：统一按钮样式，避免宽度不一致影响对齐 */
.button-container button {
width: 120px; /* 或设为 min-width: 120px; 保持弹性 */
padding: 8px 16px;
}
⚠️ 注意事项：
- 不要遗漏
justify-content: center（作用于.buttons），否则即使按钮组并排，也会左对齐； - 避免给
.button-container设置固定宽度，否则可能破坏居中效果； - 若按钮文字长度差异大，建议统一
width或min-width，并配合align-items: center保证视觉对齐； - 所有间距推荐使用
gap而非margin，更简洁、无外边距合并问题。
这样，你就能以清晰、可扩展的方式实现专业级按钮布局——既适合初学者理解 Flexbox 核心概念（flex-direction、justify-content、align-items、gap），也具备实际项目所需的健壮性与响应潜力。
