centrer verticalement ma div dans mon conteneurRésolu/Fermé

Question

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; }

Angus McKinnon Young

Angus McKinnon Young 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 AC/DC. Il est reconnaissable par son énergie sur scène, et surtout son uniforme d'écolier et son duckwalk. Site web d'AC/DC. 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 meilleur guitariste de tous les temps 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.

Configuration: Windows / Chrome 61.0.3163.100

Pitet · Answer

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

Centrer verticalement ma div dans mon conteneur

1 réponse

Discussions similaires

Newsletters