Centrer verticalement ma div dans mon conteneur
Résolu
barale61
Messages postés
1214
Date d'inscription
Statut
Membre
Dernière intervention
-
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
1 réponse
Salut,
Au moins 3 solutions possibles :
Solution 1 : position absolute + transform
Solution 2 : table-cell + vertical-align
-> On ne peut pas définir une largeur de 50% sur la cellule unique, d'où le padding: 0 25%;
On peut remplacer ce padding en ajoutant un div à l'intérieur du div class="article" sur lequel on appliquerai le width: 50%;
Solution 3 : flexbox
Au passage, évite l'utilisation de width: 100%; sur un div en position relative ou static, par défaut un div occupe déjà toute la largeur disponible.
Bonne journée
Au moins 3 solutions possibles :
Solution 1 : position absolute + transform
.container { min-height: 100vh; position: relative; } .article { width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Solution 2 : table-cell + vertical-align
.container { min-height: 100vh; display: table; } .article { padding: 0 25%; display: table-cell; vertical-align: middle; }
-> On ne peut pas définir une largeur de 50% sur la cellule unique, d'où le padding: 0 25%;
On peut remplacer ce padding en ajoutant un div à l'intérieur du div class="article" sur lequel on appliquerai le width: 50%;
Solution 3 : flexbox
.container { min-height: 100vh; display: flex; } .article { width: 50%; margin: auto; }
Au passage, évite l'utilisation de width: 100%; sur un div en position relative ou static, par défaut un div occupe déjà toute la largeur disponible.
Bonne journée
barale61
Messages postés
1214
Date d'inscription
Statut
Membre
Dernière intervention
110
Merci beaucoup, ça marche.