Align-items: почему не работает?

Question

[test]

<div class="register-container-flex">
        <div class="register-container">
        </div>
    </div>

.register-container-flex{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-container{
    width: 100%;
    max-width: 500px;
    height: 600px;
    background-color: #0000F0;
}

register-container нужно выравнять по центру страницы, но почему-то не хочет)

Answer 1

[Ankhena]

Предположу, что забыли задать 100% высоту для всей страницы

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

Comments

[test]

да, глупый косяк)Спасибо

Answer 2

[Владимир Проскурин]

Так у вас скорее всего у родителя блока .register-container-flex высота такая же, как у самого блока register-container. Вот смотрите ваш код https://jsfiddle.net/auz7w5fp/1/ все корректно. Я дополнительно задал для родителя
всего этого height: 100%;

Comments

[Kanat001]

nice!