• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Вертикальное и горизонтальное центрирование в CSS (Центрирование горизонтальное и вертикальное с помощью CSS)
Вертикальное и горизонтальное центрирование в CSS
Kosten
Четверг, 30 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
В этой мануале представляет популярная технику идеального горизонтального и вертикального центрирования в CSS при любой ширине и высоте. Часто бывает так, что работая над проектами часто случается, что вы хотите расположить элемент прямо в середине окна браузера, это как по горизонтали, так и по вертикали.

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

Вертикально и горизонтально центрирует дочерний элемент в его родительском элементе, используя position: absolute и transform: translate() в качестве альтернативы flexbox или display: table. Подобно flexbox этому, этот метод который не требует, чтобы вы знали высоту или ширину вашего родителя или ребенка, поэтому он идеально подходит для адаптивных приложений.



HTML

Код
<div class="madekon-kasdecid"><div class="lasikedub">Преобразование центрирования
</div></div>

CSS

Код
.madekon-kasdecid {
  border: 1px solid #5d5a5a;
  height: 195px;
  position: relative;
  width: 215px;
}
.lasikedub {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Объяснение:

1. position: absolute на дочернем элементе позволяет позиционировать его на основе содержащего его блока.
2. left: 50% и top: 50% смещает дочерний элемент на 50% от левого и верхнего края содержащего его блока.
3. transform: translate(-50%, -50%) позволяет отрицать высоту и ширину дочернего элемента, чтобы он был центрирован по вертикали и горизонтали.
Примечание: Фиксированные высота и ширина родительского элемента предназначены только для демонстрации.

Демонстрация
Прикрепления: 4155445.png (3.3 Kb) · desatem.zip (1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Вертикальное и горизонтальное центрирование в CSS (Центрирование горизонтальное и вертикальное с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: