如何让三个inline-block按钮居中且保持分离，无需单独设置类？

我有三个按钮，代码如下：

<button class="align" id="decrease">decrease</button>
<button class="align" id="reset">reset</button>
<button class="align" id="increase">increase</button>

同时定义了如下CSS类：

.align{
    position: absolute;
    right: 50%;
    display: inline-block;
}

期望实现按钮居中，但最终按钮堆叠在一起（效果见：）。我原本认为display:inline-block会让按钮保持分离，尝试添加margin也无效，想请教如何实现按钮居中且互不分离，是否必须为每个按钮单独设置类？

问题核心是每个按钮都加了position: absolute——绝对定位的元素会脱离正常文档流，三个按钮都会以相同的基准点定位，自然堆叠在一起，和display: inline-block无关，也不需要给每个按钮单独设类。推荐两种简单实现方式：

方式一：父容器控制整体居中（最推荐） #

给按钮套一个父容器，通过父容器实现整体居中，按钮保持默认的行内块特性：

<div class="button-group">
  <button id="decrease">decrease</button>
  <button id="reset">reset</button>
  <button id="increase">increase</button>
</div>

.button-group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 让容器向左偏移自身一半宽度，实现真正居中 */
}
.button-group button {
  margin: 0 5px; /* 给按钮加横向间距，避免挤在一起 */
}

方式二：去掉绝对定位，用文本居中 #

如果不需要绝对定位布局，直接给父容器（比如body）设置文本居中，按钮会自动横向排列并居中：

body {
  text-align: center;
}
button {
  display: inline-block;
  margin: 0 5px;
}

至于你加margin无效的原因：绝对定位元素默认宽度是内容宽度，添加的margin只会改变自身位置，但三个按钮的起始定位点完全相同，所以还是会重叠，看不到间距效果。

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