How to center block by vertical center?

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>

Now this is aligned horizontally, also I tried to align this by vertical center using position: absolute, but this rule breaks bootstrap styles.

Also I tried flex:

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

Answer 1

There are a few things you need to correct:

1. .home__buttons class should have the following properties:

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

   }

   The class should be added to column cells, not the parent div.

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

2. The label is having a default margin-bottom in bootstrap, you can remove it by applying m-0 class on <label> tag.

   <label class="m-0">
   

Link to JS Fiddle(I applied borders to clearly see the layout): https://jsfiddle.net/srijan1709/nhfyx6ge/13/

Answer 2

You can try using

.home_buttons
{
vertical-align:middle;
}