Back to questions
Junior — Middle
91
Мог бы ты привести пример, как с помощью CSS можно сделать центрирование элемента div на странице?
Answer from AI
sobes.tech AI
Для центрирования элемента <div> на странице с помощью CSS можно использовать несколько способов. Один из самых простых и универсальных — использовать Flexbox:
body, html {
height: 100%;
margin: 0;
}
.container {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
height: 100vh; /* высота контейнера - весь экран */
}
.centered-div {
width: 200px;
height: 100px;
background-color: lightblue;
}
И HTML:
<div class="container">
<div class="centered-div">Центрированный блок</div>
</div>
Этот способ выравнивает вложенный блок по центру экрана и по вертикали, и по горизонтали.
Другой способ — использовать абсолютное позиционирование с трансформацией:
.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: lightcoral;
}
Этот метод также центрирует элемент относительно окна браузера.