html - 如何垂直居中多个元素？

Question

我浏览了整个网站(以及互联网的其余部分)，唯一真正提到垂直居中两个或更多的问题是 this one ，但唯一的答案似乎就是整个代码审查。在学习 CSS 的过程中，我仍然无法按照我想要的顺序可靠地集中放置事物。水平居中通常同样困难，尽管我已经在下面的最小代码示例中进行了管理。我知道howtocenterincss.com但这只能让我垂直对齐一件事。

在下面的代码示例中，我希望这两个按钮一起在 div 中居中，一个排列在另一个上方，它们之间有一个边距。我已经成功完成了一半，但不太清楚如何在 div 中垂直对齐它们。

#buttonContainer {
  display: inline-block;
  border: solid 3px black;
  width: 400px;
  height: 400px;
}

.button {
  display: block;
  margin: auto;
}

<div id="buttonContainer">
  <button id="b1" class="button">Button 1</button>
  <button id="b2" class="button">Button 2</button>
</div>

Answer 1

在您不想重叠的地方应用绝对定位不是一个好主意。您可以使用 flexbox 来实现所需的布局。演示:

#buttonContainer {
  /* make element inline flex-container */
  /* this will make its children flex-items */
  display: inline-flex;
  /* align-items items in column */
  flex-direction: column;
  /* center items horizontally */
  align-items: center;
  /* center items vertically */
  justify-content: center;
  
  border: solid 3px black;
  width: 400px;
  height: 400px;
}

<div id="buttonContainer">
  <button id="b1" class="button">Button 1</button>
  <button id="b2" class="button">Button 2</button>
</div>