如何在HTML页面中居中4个按钮并设置左右分组布局？

没问题，咱们可以用Flexbox布局轻松实现这个需求，完全通过内联style属性就能搞定，不需要独立CSS文件。我调整了你的代码，既满足按钮的排列要求，又让整体居中：

<div style="display: flex; justify-content: center; gap: 40px; margin-top: 20px;">
  <!-- 左侧按钮组：Hello 1 和 Hello 2 相邻排列 -->
  <div style="display: flex; gap: 15px;">
    <a href="#" class="button" style="width: 100px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; background: #f5f5f5;">Hello 1</a>
    <a href="#" class="button" style="width: 100px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; background: #f5f5f5;">Hello 2</a>
  </div>

  <!-- 右侧按钮组：Hello 3 和 Hello 4 相邻排列 -->
  <div style="display: flex; gap: 15px;">
    <a href="#" class="button" style="width: 100px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; background: #f5f5f5;">Hello 3</a>
    <a href="#" class="button" style="width: 100px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; background: #f5f5f5;">Hello 4</a>
  </div>
</div>

关键调整说明： #

• 外层容器：用display: flex + justify-content: center让整个按钮组在页面水平居中，gap用来控制左右两组之间的间距，margin-top是可选设置，用来和页面顶部拉开距离。
• 左右子容器：同样用display: flex + gap，让组内的两个按钮横向相邻排列，gap控制按钮之间的间距。
• 按钮样式优化：我加了一些基础的按钮样式（边框、圆角、内边距等），让它看起来更像标准按钮，你可以根据需求随时调整这些样式细节。
• 移除换行标签：删掉了原来的<br>，因为现在需要按钮相邻排列，不需要换行。

这样调整后，既满足了“Hello 1/2左侧相邻、Hello 3/4右侧相邻”的要求，又让整个按钮组在页面中居中，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Andrea P.