This still blows my mind..

Flexbox!

The easiest possible method:
.elem {
height: 400px;
position: absolute;
top:50%;
margin-top:-200px;
}

Of course there are other methods:
<a>
<b></b>
</a>
a{ display:table;}
b{display:table-cell; vertical-align:middle;}

It's easy xD

now if you talk about center aligning a dynamic width element like a navigation which changes width every time a new item is added. That is difficult xD

@uziiuzair I appreciate the advice! I guess my initial point was that vertical alignment, though achievable by a number of overly-complicated methods (like your solutions, or Flexbox, or CSS Grid), it is far more complicated than it ever needed to be.

In fact, what I'd really love to hear is a convincing argument as to why the "vertical-align" property was designed exclusively to work only with inline or table-cell elements.

@blizzrdof77 now that you have mentioned it. Yes I too would love to know why the properties exist. This certainly couldve been made simpler.