Как мне центрировать данные для входа в середину этого поля для входа? ⇐ CSS

[Anonymous]

Я тестирую некоторые сценарии с помощью flexbox, изучая HTML и CSS. Я ни за что не могу добиться того, чтобы div пользовательского ввода располагался по центру div поля входа. Мне удалось центрировать его по вертикали с помощью align-items: center;, но я не могу заставить его двигаться вниз без использования полей (чего я бы предпочел избежать).
HTML:

Код: Выделить всё

Login









Login

CSS:

Код: Выделить всё

.page-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}

.login-box {
height: 350px;
width: 250px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.41);
border-radius: 10px;
}

.user-input {
display: flex;
flex-direction: column;
align-items: center;
}

.email,
.password {
width: 150px;
border-radius: 5px;
border: .5px solid black;
}

.login-button {
height: 25px;
width: 100px;
border: none;
background-color: darkblue;
color: white;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}

Поле входа в систему представляет собой прямоугольную теневую рамку в центре экрана. Пользовательский ввод — это место, где я создал флексбокс столбца.



Подробнее здесь: https://stackoverflow.com/questions/781 ... -login-box