使用 Flexbox 布局，为按钮容器添加 display: flex 和 flex-direction: row，再配合 gap 与 justify-content: center，即可实现多组“标题+按钮”垂直堆叠、组间水平并排、整体居中的效果。
使用 flexbox 布局，为按钮容器添加 `display: flex` 和 `flex-direction: row`，再配合 `gap` 与 `justify-content: center`，即可实现多组“标题+按钮”垂直堆叠、组间水平并排、整体居中的效果。
要实现如图所示的布局——每组包含一个顶部小标题（如 "Default"）和两个垂直排列的按钮，且多组按钮水平并排、整体在页面中居中对齐——关键在于双重 Flexbox 结构：外层控制组间横向排列，内层控制组内标题与按钮纵向堆叠。
首先，修正 HTML 结构：原 .buttons 容器内直接嵌套了两个 .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;
flex-direction: row;
gap: 20px; /* 组与组之间的水平间距 */
justify-content: center; /* 整体水平居中 */
margin: 2rem auto; /* 可选：增加上下外边距，提升视觉呼吸感 */
}
.button-container {
display: flex;
flex-direction: column;
gap: 8px; /* 标题与按钮、按钮之间的垂直间距 */
align-items: center; /* 确保组内所有子元素（包括按钮）水平居中 */
}
/* 基础按钮样式（可选优化） */
.button-container button {
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
.btn-label {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #555;
}✅ 关键要点说明：
-
justify-content: center作用于.buttons，使两组容器在父容器中水平居中； -
align-items: center作用于.button-container，确保<small></small>标题和<button></button>元素在组内水平对齐（避免因按钮宽度不一导致错位）； -
gap替代传统margin，更简洁可控地管理间距，且自动避开首尾冗余； - 无需设置固定宽度或浮动，Flexbox 天然响应式，适配不同屏幕尺寸。
? 进阶提示：若后续需支持更多按钮组（如 3–4 组），建议为 .buttons 添加 flex-wrap: wrap 并设定 max-width，配合媒体查询实现移动端堆叠布局，进一步提升可访问性与兼容性。
