html - 如何通过垂直中心居中 block ？

Question

<div class="home__buttons">
  <div class="col-md-6 col-md-offset-3">
    <div class="buttons">
      <div class="col-md-6">
        <div class="displayButton">
          <label>{{'step4_text_button1' | translate}} </label>
        </div>
      </div>
      <div class="col-md-6">
        <div class="displayButton">
          <label>{{'step4_text_button2' | translate}} </label>
        </div>
      </div>
    </div>
  </div>
</div>

现在这是水平对齐的，我也尝试使用 position: absolute 通过垂直居中对齐它，但是这个规则破坏了 Bootstrap 样式。

我也试过 flex:

.home__buttons {
    display: flex;
    align-content: center;
    align-items: center;
}

Answer 1

您需要更正一些事项:

1. .home__buttons 类应具有以下属性:

   .home__buttons {
   display: flex;
   justify-content: center;
   align-items: center;
   

   类应该添加到列单元格，而不是父 div。

   <div class="col-md-6 home__buttons">  
   

2. 标签在 bootstrap 中有一个默认的 margin-bottom，你可以通过在 <label> 上应用 m-0 类来删除它。标签。

   <label class="m-0">
   

链接到 JS Fiddle(我应用了边框以清楚地看到布局):https://jsfiddle.net/srijan1709/nhfyx6ge/13/