I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my jsfiddle:

 https://jsfiddle.net/kris_redden/34jyLpok/

    .modal-footer {
      background-color: #2A3E5D;
      color: white;
      height: 100px;
      padding: 2px 16px;
    }

    .wrapper-div {
      vertical-align: middle
    }

    .button {
      background: #e8e8e8;
      display: inline-block;
      font-size: 12px
      position: relative;
    }

    <div class="modal-footer">
      <div class="wrapper-div">
        <button type="button" class="button"> Submit Filters </button>
      </div>
    </div>

I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do. Any help would be greatly appreciated.

I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my JSFiddle:  https://jsfiddle.net/kris_redden/34jyLpok/

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
}

.wrapper-div {
  vertical-align: middle
}

.button {
  background: #e8e8e8;
  display: inline-block;
  font-size: 12px position: relative;
}

<div class="modal-footer">
  <div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
  </div>
</div>

I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do.

I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my jsfiddle:

https://jsfiddle.net/kris_redden/34jyLpok/

The HTML that I has is this:

<div class="modal-footer">
  <div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
  </div>
</div>

The CSS that I have is this:

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
}

.wrapper-div {
  vertical-align: middle
}

.button {
  background: #e8e8e8;
  display: inline-block;
  font-size: 12px
  position: relative;
}

I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do. Any help would be greatly appreciated.

I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my jsfiddle:

https://jsfiddle.net/kris_redden/34jyLpok/

    .modal-footer {
      background-color: #2A3E5D;
      color: white;
      height: 100px;
      padding: 2px 16px;
    }

    .wrapper-div {
      vertical-align: middle
    }

    .button {
      background: #e8e8e8;
      display: inline-block;
      font-size: 12px
      position: relative;
    }

    <div class="modal-footer">
      <div class="wrapper-div">
        <button type="button" class="button"> Submit Filters </button>
      </div>
    </div>

I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do. Any help would be greatly appreciated.