Vertically align images in full-height columns - html

Question

Given the following layout:
.half-side {
width: 50%;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.leftbox {
margin: 0px auto;
}
.rightbox {
margin: 0px auto;
}
<div class="half-side">
<div class="leftbox">
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div><!--
--><div class="half-side">
<div class="rightbox">
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div>
Here's a Fiddle.
How can I vertically center my images?
As you can see, I've tried vertical-align: middle to no avail. To be frank, I don't really understand why this doesn't work.
I keep seeing this "trick" - and similar approaches using negative transformations - everywhere:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Which causes the images to be pushed halfway off the top of the page.
How do I vertically align the content in my two columns?

Answer 1

In your code, your divs don't have height so it will never know where the vertical center is. The simplest hack is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.
Here's the full code solution:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.half-side {
width: 50%;
height: 100%;
display: inline-block;
text-align: center;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
.leftbox {
margin: 0px auto;
height: 100%;
}
.rightbox {
margin: 0px auto;
height: 100%;
}
<div class="half-side">
<div class="leftbox">
<span class="helper"></span>
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div><!--
--><div class="half-side">
<div class="rightbox">
<span class="helper"></span>
<img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" />
</div>
</div>

Answer 2

Vertical centering problems are usually best solved with display: flex. See https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/