如何在垂直中心靠近中心

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>

现在，这是水平对齐的，我也试图使用位置通过垂直中心对齐：绝对，但是此规则破坏了引导样式。

我也尝试了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 class="col-md-6 home__buttons">  
   

2. 标签在Bootstrap中具有默认的边距底部，您可以通过在<label>标签上应用M-0类将其删除。

   <label class="m-0">
   

链接到JS小提琴（我应用边框清楚地查看布局）：https：//jsfiddle.net/srijan1709/nhfyx6ge/13/

Answer 2

您可以尝试使用

.home_buttons
{
vertical-align:middle;
}