如何垂直居中多个元素？

Question

我看过整个网站（以及互联网的其余部分），实际提到垂直居中两个或两个以上的唯一问题是这个 ，但唯一的答案似乎只是整个代码审查。 在学习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> 

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 ：

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