Вертикальное выравнивание никогда не работает

Да, очевидно, я делаю это неправильно. Почему это не так просто, как выравнивание по горизонтали? Я сижу, и моя работа в течение многих часов останавливается, пытаясь понять, как вертикально выровнять по центру, поэтому мне не нужно багать вас, ребята, с моей глупый, скорее всего, очень простой вопрос.

Блок отображения или Table-Cell, все, что я читаю, никогда не работает. Я подумал: "Может быть, если бы я горизонтально выровнял свой img с помощью .divID img, а затем вертикально выровнял сам div", к сожалению, мне хотелось бы, чтобы это сработало. Но даже когда я попытался центрировать div вертикально посередине, он испортил центрирование изображения и даже не работал.

TL; DR: я ненависть, пытающаяся вертикально выровнять материал.

Я пытаюсь получить изображение заголовка по вертикали и по горизонтали. Этот мой код, с которым я работаю.

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

Ответы

Ответ 1

Я ненавижу table и table-cell столько же, сколько следующий парень, но когда вы знаете высоту родительского элемента (#header в вашем случае), все становится очень легко.

Здесь рабочая скрипка.

Вам просто нужно добавить следующие стили в свой CSS:

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