Vertical align middle button in div

this can also be achieved by using

.button-container{
 position:relative;
 height:100%;
}

.button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

vertical-align:middle; is not necessary here. i would use this method if button container height is unknown and if i could not use flex-box (dispaly:flex;) instead.
https://jsfiddle.net/34jyLpok/7/

another option is to use flex-box (display:flex;)

.button-container{
     height:100%;
     display: flex;
     //flex-direction: column;//only vertical
     align-items: center;//both vertical and horizonal
     justify-content: center
    }

    .button{
      width:100px;
    }

the problem with display: flex is that it is not fully supported in old IE browser versions. https://jsfiddle.net/34jyLpok/9/

Easiest would be to add the following to .modal-footer

display: flex;
align-items: center;

.modal-footer {
display: table;
width: 100%;
}

.wrapper-div {
display: table-cell;
  vertical-align: middle
}

Go for something like this. Here is the fiddle.

You can use flexbox as shown below

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}