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

barale61 1058 Messages postés jeudi 13 septembre 2012Date d'inscription 9 janvier 2018 Dernière intervention - 11 oct. 2017 à 17:49 - Dernière réponse : barale61 1058 Messages postés jeudi 13 septembre 2012Date d'inscription 9 janvier 2018 Dernière intervention
- 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>


Afficher la suite 

2 réponses

Répondre au sujet
Pitet 2368 Messages postés lundi 11 février 2013Date d'inscription 15 janvier 2018 Dernière intervention - Modifié par Pitet le 12/10/2017 à 12:46
0
Utile
1
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
barale61 1058 Messages postés jeudi 13 septembre 2012Date d'inscription 9 janvier 2018 Dernière intervention - 12 oct. 2017 à 14:54
Merci beaucoup, ça marche.
Commenter la réponse de Pitet