如何垂直居中多个元素？

I've looked all across this site (and the rest of the internet), and the only question which actually mentions vertically centering two or more is this one, but the only answer there seems to just be an entire code review. In the process of learning CSS, I still cannot reliably position things centrally in the order I want them. Horizontally centering is often just as difficult, although I've managed in the minimal code example below. I know of howtocenterincss.com but that only lets me align one thing vertically.

我看过整个网站(以及互联网的其他部分),实际提到垂直居中两个或两个以上的唯一问题是这个,但唯一的答案似乎只是整个代码审查。在学习CSS的过程中,我仍然无法按照我想要的顺序集中定位事物。尽管我已经在下面的最小代码示例中进行了管理,但水平居中通常也同样困难。我知道howtocenterincss.com,但这只能让我垂直对齐一件事。

In the following code example, I want the two buttons collectively to be centered in the div, arranged one above the other, with a margin in between them. I've managed to get half way there, but can't quite figure out how to align them vertically within the div.

在下面的代码示例中,我希望两个按钮集中在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>

3 个解决方案

#1

It's not a good idea to apply absolute positioning where you don't want overlapping. You can use flexbox to achieve desired layout. Demo:

在不需要重叠的地方应用绝对定位并不是一个好主意。您可以使用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>

#2

inline-flex support in IE10+

IE10 +中的inline-flex支持

flex-direction support in IE11 only

仅在IE11中支持flex-direction

align-items support in IE11 only

仅限IE11中的align-items支持

So, i Prefer dont use this properties,i use this way :

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

.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>

#3

I usually prefer to use flexbox:

我通常更喜欢使用flexbox:

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

.button {
  display: block;
}

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

#1