Центрирование элементов на странице средствами CSS
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.
Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
Code (HTML) : Убрать нумерацию
- .container {
- position: relative;
- }
Блок выровнен по центру по горизонтали и по вертикали:
Code (HTML) : Убрать нумерацию
- .align_center {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -webkit-transform: translateX(-50%) translateY(-50%);
- -o-transform: translateX(-50%) translateY(-50%);
- }
Code (HTML) : Убрать нумерацию
- .align_center_left {
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- }
Code (HTML) : Убрать нумерацию
- .align_center_right {
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- }
Просмотров: 1145 | Комментариев: 1
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Vladimir
(26.05.2020 в 19:40):
А когда не нужно сильно заморачиваться кроссбраузерностью, флекс для центрирования хорош.
Добавить комментарий
Заполните форму для добавления комментария