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

Итак, есть родительский блок некой высоты, которая, по сути дела, нас не волнует — мы к ней не привязываемся. И есть дочерний элемент, высота которого нам не известна. Задача — сделать вертикальное выравнивание дочернего блока внутри родительского.

Вначале обозначим стили, которые в данных примерах отвечают только за наглядность.

.parent {
    height: 300px;
    background-color: #aaaaaa;
}

.parent .child {
    background-color: #fafafa;
    width: 200px;
    left: 0;
    right: 0;
    margin: auto;
}

А теперь по теме.

Способ 1. transform: translate()

Ключём к решению тут является CSS3 свойство transform с функцией translate().

<style>
.parent {
    position: relative;
}

.parent .child {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
}
</style>

<div class="parent">
    <div class="child">
        Вертикальное выравнивание блочного элемента неустановленной высоты, внутри блочного элемента любой высоты...
    </div>
</div>

Способ 2. Дополнительный блок-помощник. (Старый способ)

После дочернего блока помещается дополнительный элемент.

<style>
.parent .child {
    vertical-align: middle;
    display: inline-block;
}
.parent .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
</style>

<div class="parent">
    <div class="child">
        Вертикальное выравнивание блочного элемента неустановленной высоты, внутри блочного элемента любой высоты...
    </div>
    <div class="helper"></div>
</div>

Способ 3. Осовременненый способ 2

Суть в том, что пустой блок-помощник заменяется псевдоэлементом :after

<style>
.parent .child {
    vertical-align: middle;
    display: inline-block;
}
.parent:after {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
</style>

<div class="parent">
    <div class="child">
        Вертикальное выравнивание блочного элемента неустановленной высоты, внутри блочного элемента любой высоты...
    </div>
</div>

Способ 4. Flex

Основан на flex-модели отображения и тут вообще все просто:

<style>
.parent {
    display: flex;
}
.parent .child {
    margin: auto;
}
</style>

<div class="parent">
    <div class="child">
        Вертикальное выравнивание блочного элемента неустановленной высоты, внутри блочного элемента любой высоты...
    </div>
</div>

Вот только пользоваться этим способом еще рановато (июль 2016), т.к. поддержка flex начинается только с IE11.