Центрирование четырех кнопок в делениях с помощью Flex

Question

Мне нужно отцентрировать гопризонтальные и вертикальные 4 кнопки с помощью Flex.У меня есть два col.Каждый столбик имеет две кнопки.Я бы хотел расположить кнопки по горизонтали и вертикали.Я попробовал следующее, но кнопки не центрированы по вертикали.

стиль

<style type="text/css">
.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
}

.flex-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}
</style>

разметка

 <div class="col-sm-8 flexbox-container">
   <div class="col-sm-6 btn-group flex-item">
     <button type="button" id="id_button_add" class="btn btn-danger btn-block">
        <i class="fa fa-remove" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Excluir</span>
     </button>
     <button type="button" id="id_button_add" class="btn btn-warning btn-block">
        <i class="fa fa-lock" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Bloquear</span>
     </button>
   </div>
   <div class="col-sm-6 btn-group flex-item">
     <button type="button" id="id_button_add" class="btn btn-success btn-block">
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Gerar Horários</span>
     </button>

     <button type="button" id="id_button_add" class="btn btn-success btn-block">
        <i class="fa fa-search" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Filtrar</span>
     </button>                                       
   </div>
</div>

Answer 1

С помощью flex можно легко центрировать.

justify-content:center; для горизонтального центрирования.

align-items:center; для вертикального центрирования.

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content:center;
    
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    
    /* just so we can see the parent div*/
    border:2px solid black;
    height:100px;
}

.flex-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}

<div class="col-sm-8 flexbox-container">
   <div class="col-sm-6 btn-group flex-item">
     <button type="button" id="id_button_add" class="btn btn-danger btn-block">
        <i class="fa fa-remove" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Excluir</span>
     </button>
     <button type="button" id="id_button_add" class="btn btn-warning btn-block">
        <i class="fa fa-lock" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Bloquear</span>
     </button>
   </div>
   <div class="col-sm-6 btn-group flex-item">
     <button type="button" id="id_button_add" class="btn btn-success btn-block">
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Gerar Horários</span>
     </button>

     <button type="button" id="id_button_add" class="btn btn-success btn-block">
        <i class="fa fa-search" aria-hidden="true"></i>
        <span class="hidden-xs hidden-sm"> Filtrar</span>
     </button>                                       
   </div>
</div>