как я могу центрировать свой flexbox посередине экрана?

avatar
cShaxu
8 августа 2021 в 18:37
58
2
-4

Привет, я хочу спросить, как я могу центрировать блок (div) в середине экрана?

.mybox
{
    display: flex;
    width: 250px;
    height: 250px;
    background: white;
}
<div class="mybox"></div>
Источник
Eric Qvarnström
8 августа 2021 в 18:39
0

Отвечает ли это на ваш вопрос? Как центрировать элемент по горизонтали

Andrew Morton
8 августа 2021 в 18:41
0

Вы имеете в виду в центре физического дисплея или в центре окна браузера? Вероятно, вы хотите найти «шпаргалку по flexbox».

Robert Rocha
8 августа 2021 в 22:37
0

Это все HTML?

Ответы (2)

avatar
CodingRaz
8 августа 2021 в 18:45
2

Посмотрите на этот фрагмент кода. Это должно работать для любого 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>
cShaxu
8 августа 2021 в 19:00
0

как насчет того, когда я хочу центрировать середину экрана: inline-flex

avatar
Bug Creators
8 августа 2021 в 18:45
0

вам понадобится гибкий контейнер и определите гибкий элемент. Например, если вы хотите использовать 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;
}
cShaxu
8 августа 2021 в 18:46
0

я получил центр на верхнем экране я хочу в середине экрана

Bug Creators
8 августа 2021 в 18:49
0

@cShaxu вы можете добавить align-items: center; в .container

cShaxu
8 августа 2021 в 19:00
0

как насчет того, когда я хочу центрировать середину экрана: inline-flex