Не могу разобраться с выравниванием блоков Flexbox

Question

Здраствуйте! Нужно создать простенькое окно для входа на сайт, но начались проблемы с выравниванием по центру, вот 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>

При таком варианте написания, как мне казалось, что поля для ввода должны были выровняться по центру блока, но поля для ввода и кнопка намертво прилипают к левому краю блока.

Answer 1

У Вас не работало, потому что display: flex работает для дочерних елементов, а не для указанного в нем елементе.

.content {
  margin-top: 150px;
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  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>

БЛОГ НА HUSL

Не могу разобраться с выравниванием блоков Flexbox

Ответы (1 шт):