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来实现所需的布局。演示：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

IE10 +中的

inline-flex支持

仅在IE11中支持

flex-direction

仅在IE11中支持

align-items

所以，我更喜欢不使用这个属性，我用这种方式：

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: inline-block;
}

#buttonContainer {
    display: inline-block;
    position: relative;
    border: solid 3px black;
    width: 400px;
    height: 400px;
}

.button {
    display: block;
    margin:2px;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: inline-block;
}

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

Answer 3

我通常更喜欢使用flexbox：

＆＃13;

#buttonContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: solid 3px black;
  width: 400px;
  height: 400px;
}

.button {
  display: block;
}

＆＃13;

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

＆＃13;

如何垂直居中多个元素？

3 个答案: