求助：如何用CSS实现4个按钮在页面顶部水平居中？

嘿，我来帮你搞定这个按钮对齐的困扰！你遇到的问题其实是没找对父容器和按钮样式的组合方式，下面给你两种实用的解决方案：

方案一：用Flexbox（推荐，现代浏览器友好） #

这是目前最简洁可靠的方法，只需要给按钮的父容器设置flex布局：

/* 按钮的父容器 */
.button-group {
  display: flex;
  justify-content: center; /* 核心：让按钮组水平居中 */
  align-items: flex-start; /* 确保按钮垂直方向靠顶部，不会居中 */
  gap: 12px; /* 可选：给按钮之间加间距，看起来更美观 */
  padding-top: 20px; /* 可选：和页面顶部拉开一点距离 */
}

/* 按钮样式（按需调整） */
.button-group button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

原理：flex布局的justify-content: center负责让内部元素水平居中，align-items: flex-start强制按钮在垂直方向贴紧容器顶部，完美避免你之前遇到的垂直对齐问题。

方案二：用text-align + inline-block（兼容旧浏览器） #

如果需要兼容一些老版本浏览器，这种传统方法也能搞定：

/* 按钮的父容器 */
.button-group {
  text-align: center; /* 让内部inline/inline-block元素水平居中 */
  padding-top: 20px; /* 可选：和页面顶部的间距 */
}

/* 按钮样式 */
.button-group button {
  display: inline-block; /* 让按钮并排显示 */
  margin: 0 6px; /* 可选：按钮之间的间距 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

原理：父容器的text-align: center会作用于内部的inline/inline-block元素，让它们整体水平居中；按钮设为inline-block后就会横向排列，而且默认垂直方向就是靠顶部的，不会出现你之前遇到的垂直居中问题。

额外小提示 #

如果你的按钮直接放在body标签里，记得先去掉body的默认外边距，避免页面出现不必要的留白：

body {
  margin: 0;
}

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