Centrer verticalement ma div dans mon conteneur [Résolu/Fermé]

Signaler
Messages postés
1103
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
20 octobre 2020
-
Messages postés
1103
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
20 octobre 2020
-
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.

			.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

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
431
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
Messages postés
1103
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
20 octobre 2020
79
Merci beaucoup, ça marche.