В этой мануале представляет популярная технику идеального горизонтального и вертикального центрирования в 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%) позволяет отрицать высоту и ширину дочернего элемента, чтобы он был центрирован по вертикали и горизонтали.
Примечание: Фиксированные высота и ширина родительского элемента предназначены только для демонстрации.
Демонстрация
