使用Flex将四个Button居中div

Question

我需要使用Flex将水平和垂直4个按钮居中。 我有两个山口。每个列有两个按钮。 我想将按钮水平和垂直居中。 我已经尝试了下一个，但是按钮没有垂直居中。

样式

foo.promise();

标记

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

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>