Menu

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

barale61 1062 Messages postés jeudi 13 septembre 2012Date d'inscription 11 février 2018 Dernière intervention - 11 oct. 2017 à 17:49 - Dernière réponse : barale61 1062 Messages postés jeudi 13 septembre 2012Date d'inscription 11 février 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 2378 Messages postés lundi 11 février 2013Date d'inscription 2 février 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 1062 Messages postés jeudi 13 septembre 2012Date d'inscription 11 février 2018 Dernière intervention - 12 oct. 2017 à 14:54
Merci beaucoup, ça marche.
Commenter la réponse de Pitet