Centering four Buttons into divs using Flex

Question

I need to center hoprizontal and vertically 4 buttons using Flex. I have two cols. Each col has two buttons. I´d like to center the buttons horizontal and vertically. I have tried the next but the buttons are not centered vertically.

style

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

markup

 <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

Centering is really easy with flex.

justify-content:center; for horizontal centering.

align-items:center; for vertical centering.

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