Все способы вертикального выравнивания в CSS

[Ninjak]

"Выравнивание с помощью псевдоэлемента" в данном способе отступ сверху и отступ снизу (внутреннего блока от внешнего) будет различаться примерно в 2 пикселя.

[belyan]

Проверил пример из статьи — отступы одинаковые. Но вообще я встречал проблему, о который вы говорите. Обычно она решается с помощью font-size: 0.

[Ninjak]

или это всё-таки было в способе с line-height? =)

[belyan]

Да, там. )
Вот обновленный пример, где проблема с 2px решена:
http://jsfiddle.net/c1bgfffq/30/

[CnapoB]

Минус свойства transform еще и в том, что, если вдруг вы захотите добавить элемент с position:fixed внутрь элемента с transform, то он будет вести себя как position:absolute. Пример.

[belyan]

Не знал об этом, спасибо за ваш комментарий.

[c01nd01r]

На русском:
http://frontender.info/centering-css-complete-guide/

[SerDIDG]

Добро пожаловать в мою статью — https://habrahabr.ru/post/238449/
PS. Транформ крайне не рекомендую.

[i360u]

Минус выравнивания с помощью transform — в субпиксельном рендеринге содержимого блока, в случае, если вычисленное значение смещения не является целым числом. А поддержка только современных браузеров, это не везение, это нормально. Поэтому flebox + autoprefixer сильно облегчат вам жизнь.

[belyan]

Если не нужна поддержка IE 9, то конечно лучше использовать flexbox.

[savostin]

Для простоты рассмотрим случай, когда размеры внешнего и внутреннего блока известны.

А не слишком ли Вы упростили себе задачу?

[spmbt]

Но там же нет слов "и равны"!

[belyan]

Упрощение сделано для того, чтобы объяснить читателю как работает свойство vertical-align. В дальнейшем рассматриваются различные варианты задачи, в том числе, когда высоты обоих блоков неизвестны.

[Alexufo]

А тут форме квеста подан тот же материал :-)
https://css-tricks.com/centering-css-complete-guide/

[TNK]

Катастрофически не хватает информации о проблеме пробела между ::before и .inner в методе с псевдоэлементом, способах борьбы с ним и их плюсах и минусах.

[belyan]

Если имеется в виду проблема с отступами между инлайн блоков, то вот хорошая статья на эту тему:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

[TNK]

Совершенно верно, именно эта проблема. Я-то осведомлён о ней, а вот человек неосведомлённый, попробовав по вашей статье выровнять блок, может быть непрятно удивлён, когда окажется что блок вовсе и не центрирован, а находится на ширину пробела текущей гарнитуры правее центра, а в случае совпадающих размеров родителя и потомка вообще уедет вниз.

[ichigo]

А OSS и CSS это тоже самое?