Центрирование элементов на странице средствами CSS

За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.

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

Контейнер, относительно которого должны быть спозиционированы вложенные блоки.Значение relative определяет, что абсолютное позиционирование всех вложенных блоков должно считаться не от краев экрана, а от границ родительского элемента. Ну а теперь переходим к описанию правил для вложенных блоков.

Читать статью целиком »