Blog. Just Blog

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

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

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

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

Блок выровнен по центру по горизонтали и по вертикали:
  1. .align_center {
  2.     positionabsolute;
  3.     top50%;
  4.     left50%;
  5.     transformtranslateX(-50%) translateY(-50%);
  6.     -moz-transformtranslateX(-50%) translateY(-50%);
  7.     -webkit-transformtranslateX(-50%) translateY(-50%);
  8.     -o-transformtranslateX(-50%) translateY(-50%);
  9. }
Блок прижат к левому краю, выровнен по центру по вертикали:
  1. .align_center_left {
  2.     positionabsolute;
  3.     top50%;
  4.     left0;
  5.     transformtranslateY(-50%);
  6.     -moz-transformtranslateY(-50%);
  7.     -webkit-transformtranslateY(-50%);
  8.     -o-transformtranslateY(-50%);
  9. }
Блок прижат к правому краю, выровнен по центру по вертикали:
  1. .align_center_right {
  2.     positionabsolute;
  3.     top50%;
  4.     right0;
  5.     transformtranslateY(-50%);
  6.     -moz-transformtranslateY(-50%);
  7.     -webkit-transformtranslateY(-50%);
  8.     -o-transformtranslateY(-50%);
  9. }
Готовый пример с отцентрованными блоками разного размера вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте
Просмотров: 1145 | Комментариев: 1

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Vladimir (26.05.2020 в 19:40):
А когда не нужно сильно заморачиваться кроссбраузерностью, флекс для центрирования хорош.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.11 сек. / MySQL: 2 (0.0073 сек.) / Память: 4.5 Mb
Наверх