Почему для вертикального центрирования нужна указанная высота, а не ширина? - PullRequest
Новая
       0

Почему для вертикального центрирования нужна указанная высота, а не ширина?

0 голосов
/ 17 апреля 2020

Я пытаюсь расположить центр по вертикали, используя только flex показ Я знаю, как это сделать с другими методами, но мне нужно понять, почему это не работает. (Контейнер действительно центрируется по горизонтали, но не по вертикали) .... 

<body>
<div class="container"></div>
</body>

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; //works fine
    align-items: center; // 


}

.container {
    width: 80vw;
    height: 80vh;
    border-radius: 10%;
    padding: 0;
    margin: 0;
}

1 Ответ

1 голос
/ 17 апреля 2020

Да, это центрировано, как вы можете видеть здесь: 

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
  border: solid 1px green;

}

.container {
    width: 80vw;
    height: 80vh;
    border-radius: 10%;
    padding: 0;
    margin: 0;
    border: solid 1px red;
}
<div class="container"></div>

Но, вероятно, то, что вы хотите, это 

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
  border: solid 1px green;
  height: 100%;
}

html {
  height: 100%;
}

.container {
    width: 80vw;
    height: 80vh;
    border-radius: 10%;
    padding: 0;
    margin: 0;
    border: solid 1px red;
}
<div class="container"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...