Signaler

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

Posez votre question barale61 1054Messages postés jeudi 13 septembre 2012Date d'inscription 12 octobre 2017 Dernière intervention - Dernière réponse le 12 oct. 2017 à 14:54 par barale61
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>


Utile
+0
plus moins
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 1054Messages postés jeudi 13 septembre 2012Date d'inscription 12 octobre 2017 Dernière intervention - 12 oct. 2017 à 14:54
Merci beaucoup, ça marche.
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !