Centrer verticalement ma div dans mon conteneur

Résolu/Fermé
barale61
Messages postés
1177
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 juin 2022
- 11 oct. 2017 à 17:49
barale61
Messages postés
1177
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 juin 2022
- 12 oct. 2017 à 14:54
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

Pitet
Messages postés
2812
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juin 2022
534
Modifié le 12 oct. 2017 à 12:46
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
0
barale61
Messages postés
1177
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 juin 2022
105
12 oct. 2017 à 14:54
Merci beaucoup, ça marche.
0