Vertical aligning never ever works

Question

Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.

Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.

TL;DR: I hate trying to vertically align stuff so much.

I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.

HTML

<div id="wrapper">
    <div id="header">
        <div id="logo">
            <img src="http://i.imgur.com/d0umnxt.png" />
        </div>
    </div>
</div>

CSS

body {
    margin: 0px;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #151B1F;
}
#logo {
    display: block;
    margin: auto;
}

Answer 1

I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.

Here's a working fiddle.

You just need to add the following styles to your CSS:

#header {
    display: table;
}
#logo {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}