Centrer VERTICALEMENT et HORIZONTALEMENT un formulaire de connexion

Bonjour,

J'ai créé un formulaire de connexion simple : IDENTIFIANT, MOT DE PASSE et SUBMIT.
Je souhaiterais centrer ce formulaire VERTICALEMENT et HORIZONTALEMENT afin qu'il apparaisse au centre de la page, au PIXEL PRÈS. Il faudrait aussi que chaque champ (IDENTIFIANT, MOT DE PASSE ET SUBMIT) apparaissent les uns en dessous des autres pour que sur chaque ligne il y ait le LABEL et l'INPUT (total 3 lignes).

Pouvez-vous m'aider à faire cela svp ?
Voici mon code actuel : https://codepen.io/Titouan79/pen/mgvMQV

Merci d'avance pour l'aide que vous m'apporterez
Modifié par Titouan79 (26 Apr 2019 - 22:09)

Hello,

Pour le centrage horizontal et vertical, je vois que tu as trouvé comment procéder.

Pour ce qui est de ta seconde contrainte, c'est difficile si tu ne peux pas toucher au HTML. En effet, comment le navigateur peut-il deviner que tu veux passer à la ligne aux endroits souhaités alors que tous les éléments sont frères entre eux.

Tu peux y arriver mais au prix de grosses bidouilles :

label::before {
  content: "";
  display: inline-block;
  width: 100%;
}
[type=submit] {
  display: block;
  width: fit-content;
}

L'idée ici est de générer des éléments "séparateurs" avant chaque <label>, puis de passer ton submit à la ligne en le forçant en block, puis en redéfinissant sa taille.

Le mieux serait bien entendu de rassembler tes couples label+input au sein de conteneurs qui seraient en display: block.