Почему у меня flex не выравнивает элементы по центру?
Всем привет! Почему у меня flex не выравнивает элементы по центру? 🤔
Хочу, чтобы всё было по центру горизонтально и вертикально, но они упорно прижаты к углу!
1 2 3 |
<div class="wrapper"> <div class="box">Привет!</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 |
.wrapper { display: flex; justify-content: center; align-items: center; height: 100%; } .box { background: pink; padding: 20px; } |
А wrapper внутри body, и всё равно всё сбито влево-вверх. Почему center игнорится? Что я не учёл? 😩
1 ответ
@enid
Ваш flex-код в целом выглядит правильно, и проблемой может быть то, что высота родительского элемента (в данном случае body или самого html) не задана на 100%. Чтобы сделать flex-центрирование эффективным, необходимо убедиться, что родительские элементы тоже имеют 100% высоты. Попробуйте добавить следующий CSS-код:
1 2 3 4 |
html, body {
height: 100%;
margin: 0;
}
|
Обратите внимание на то, что установка margin: 0 убирает дефолтные отступы у body, которые могут также влиять на выравнивание элементов. После этих изменений, ваш контейнер .wrapper тоже занимает 100% высоты, и выравнивание по центру начнется работать корректно.
По итогу ваш CSS будет выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.box {
background: pink;
padding: 20px;
}
|
Добавьте эти изменения, и ваши элементы должны правильно выравниваться как по горизонтали, так и по вертикали.