Page 99 - CSS

height: 50px;/* max image height */
width: 100px;
border: 1px solid blue;
text-align: center;
}
.wrap:before {
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 1px;
}

img {
vertical-align: middle;
}

Horizontal and Vertical centering using table layout

One could easily center a child element using table display property.

HTML

<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>

CSS

.wrapper {
display: table;
vertical-align: center;
width: 200px;
height: 200px;
background-color: #9e9e9e;
}
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
background-color: teal;
}

Using calc()

The calc() function is the part of a new syntax in CSS3 in which you can calculate (mathematically)
what size/position your element occupies by using a variety of values like pixels, percentages, etc.

https://riptutorial.com/ 77