Centrer verticalement ma div dans mon conteneur
Résolu
barale61
Messages postés
1126
Date d'inscription
Statut
Membre
Dernière intervention
-
barale61 Messages postés 1126 Date d'inscription Statut Membre Dernière intervention -
barale61 Messages postés 1126 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite centrer verticalement ma div dans mon conteneur (c'est à dire au millieu de mon écran étant donné que mon conteneur fait 100% de hauteur) alors j'y arrive en largeur mais pas en hauteur (il y a longtemps que je n'ai pas fais de css. Je vous remercie de votre aide.
Je souhaite centrer verticalement ma div dans mon conteneur (c'est à dire au millieu de mon écran étant donné que mon conteneur fait 100% de hauteur) alors j'y arrive en largeur mais pas en hauteur (il y a longtemps que je n'ai pas fais de css. Je vous remercie de votre aide.
.container {
width: 100%;
min-height: 100vh;
}
.article {
opacity:1;
width: 50%;
margin:50% auto;
}
<section class="container"> <section class="article"> <h1>Angus McKinnon Young</h1> <img src="img/angus.jpg"> <p><strong>Angus McKinnon Young</strong> est un musicien australien d'origine britannique, né le 31 mars 19551 à Glasgow (Écosse). Angus Young est connu pour être guitariste soliste, compositeur et cofondateur du groupe de hard rock <mark>AC/DC</mark>. Il est <span class="orange">reconnaissable par son énergie</span> sur scène, et surtout son uniforme d'écolier et son duckwalk. Site web d'<a href="http://acdc.com" rel="nofollow noopener noreferrer" target="_blank" title="AC/DC">AC/DC</a>. Tout comme les autres membres du groupe, il a été intronisé dans le Rock and Roll Hall of Fame en 2003. La même année, il a été classé 24e <mark>meilleur guitariste de tous les temps</mark> par le « magazine Rolling Stone » 2,3. Le référendum organisé par le magazine français Guitar Part en 2005 l'a classé 11e meilleur guitariste[réf. souhaitée]. Le magazine Rolling Stones le cite souvent comme étant l'un des meilleurs guitaristes de tous les temps grâce à ses performances musicales et son incroyable énergie sur scène4.</p> </section> </section>
1 réponse
-
Salut,
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
