Flexbox e espaçamentos

CSS

23/01/2019

Segue o seguinte código:
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title> Quadrado </title>
  <link rel="stylesheet" href="css/principal.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
  <main>
    <header class="quadrado">
      <h1 class="h1"> Cadastro: </h1>
      <label>Nome: </label>
      <input type="text"></input>
      <label>Plataforma: </label>
      <input type="text"></input>
      <label>Ano: </label>
      <input type="date"></input>
      <button> Salvar </button>
    </header>
  </main>
</body>
</html>


Com o seguinte CSS:


main {
  display: flex;
  justify-content: center;
  height: 100%;
}

button {
  width: 8em;
}

label {
  font-family: ''Ubuntu'', sans-serif;
}

.h1 {
  font-size: 2em;
  font-family: monospace;
  text-align: center;
}

.quadrado {
  width: 15em;
  height: 15em;
  border: solid 2px black;
  display: flex;
  flex-direction: column;
  padding-left: 1em;
  padding-right: 1em;
}


Gostaria de posicionar, esse quadrado, no centro, tanto na verical quanto na horizontal. Na horizontal, consegui, mas na vertical, não tem jeito. Não sei onde estou errando. Alguém poderia ajudar? E mais, para adicionar espaçamento entre os campos, qual seria a melhor maneira?
Grato pela atenção!
Bruno T.

Bruno T.

Curtidas 1
POSTAR