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

06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

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

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

Контейнер, относительно которого должны быть спозиционированы вложенные блоки.

Code (HTML) : Убрать нумерацию

.container {
position: relative;
}

Значение 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%);
}

Готовый пример с отцентрованными блоками разного размера вы можете посмотреть на демонстрационной странице.

Просмотров: 1071 | Комментариев: 1

Метки: CSS, HTML, оформление сайта

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

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 34,319 раз

День работника ломоперерабатывающей отрасли России

День российской полиграфии

День юридической службы Министерства внутренних дел России

День принятия Крыма, Тамани и Кубани в состав Российской империи

День подснежника

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 380

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0057 сек.) / Память: 4.5 Mb

	2024 - АПРЕЛЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

Комментарии

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