Vertical align middle button in div [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
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.

Answer 1

Easiest would be to add the following to .modal-footer
display: flex;
align-items: center;

Answer 2

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/

Answer 3

.modal-footer {
display: table;
width: 100%;
}
.wrapper-div {
display: table-cell;
vertical-align: middle
}
Go for something like this. Here is the fiddle.

Answer 4

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

Answer 5

You can change your style to this
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display:table;
width: 100%;
}
.wrapper-div {
display:table-cell;
vertical-align: middle;
}
.button {
background: #e8e8e8;
display: block;
margin:auto;
font-size: 12px
position: relative;
}
You can remove margin:auto; from .button to only vertically center button
See on fiddle

Answer 6

This is one way of doing it.
.wrapper-div {
line-height: 60px; // ex: 60px, The button will center to line-height.
}
.wrapper-div button {
// height of button must be less than its parent.
height: 30px;
display: inline-block;
vertical-align: baseline;
}
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>