Здраствуйте! Нужно создать простенькое окно для входа на сайт, но начались проблемы с выравниванием по центру, вот HTML:
.content {
display: flex;
justify-content: center;
margin-top: 150px;
}
.box {
width: 300px;
height: 350px;
border-radius: 12px;
background-color: #6e777a85;
}
.box input {
display: grid;
align-content: center;
align-items: center;
width: 40%;
}
<div class="content">
<form class="box">
<h1>LOGIN</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<input type="submit" value="Login">
</form>
</div>
При таком варианте написания, как мне казалось, что поля для ввода должны были выровняться по центру блока, но поля для ввода и кнопка намертво прилипают к левому краю блока.