Привет, я хочу спросить, как я могу центрировать блок (div) в середине экрана?
.mybox
{
display: flex;
width: 250px;
height: 250px;
background: white;
}<div class="mybox"></div>как я могу центрировать свой flexbox посередине экрана?
cShaxu
8 августа 2021 в 18:37
58
2
Ответы (2)
CodingRaz
8 августа 2021 в 18:45
Посмотрите на этот фрагмент кода. Это должно работать для любого div.
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
section {
width: 200px;
border: 1px solid #2d2d2d;
display: flex;
justify-content: center;
}<div class="center-screen">
<section>
<div>Your Content Here</div>
</section>
</div>8 августа 2021 в 19:00
как насчет того, когда я хочу центрировать середину экрана: inline-flex
Bug Creators
8 августа 2021 в 18:45
вам понадобится гибкий контейнер и определите гибкий элемент. Например, если вы хотите использовать center
<div class="container">
<div class="mybox"></div>
</div>
и файл css должен быть:
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
}
.mybox {
width: 250px;
height: 250px;
background: black;
}
или вы можете использовать поля:
.mybox{
margin: 0 auto;
}
8 августа 2021 в 18:46
я получил центр на верхнем экране я хочу в середине экрана
8 августа 2021 в 18:49
@cShaxu вы можете добавить align-items: center; в .container
8 августа 2021 в 19:00
как насчет того, когда я хочу центрировать середину экрана: inline-flex
Отвечает ли это на ваш вопрос? Как центрировать элемент по горизонтали
Вы имеете в виду в центре физического дисплея или в центре окна браузера? Вероятно, вы хотите найти «шпаргалку по flexbox».
Это все HTML?