Centrer verticalement ma div dans mon conteneur
Résolu/Fermé
barale61
Messages postés
1192
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
17 avril 2024
-
11 oct. 2017 à 17:49
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 12 oct. 2017 à 14:54
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 12 oct. 2017 à 14:54
A voir également:
- Centrer div
- Div c++ - Télécharger - Langages
- Enlever #div/0 dans tableau croisé dynamique ✓ - Forum Excel
- Fusionner et centrer excel grisé ✓ - Forum Excel
- Centrer un tableau css - Forum Webmastering
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? - Forum Jeux vidéo
1 réponse
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
Modifié le 12 oct. 2017 à 12:46
Modifié le 12 oct. 2017 à 12:46
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
12 oct. 2017 à 14:54