CSS => Centrage

Utiliser la transformation CSS

Les transformations CSS sont basées sur la taille des éléments, donc si vous ne savez pas quelle est la taille ou la largeur de votre élément, vous pouvez le positionner à 50% du haut et de la gauche d'un conteneur relatif et le traduire de 50% à gauche le centrer verticalement et horizontalement.

Gardez à l'esprit qu'avec cette technique, l'élément pourrait être rendu à une limite de pixels non entiers, ce qui le rendrait flou. Voir cette réponse dans SO pour une solution de contournement.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Voir l'exemple dans JSFiddle

COMPATIBILITÉ DU NAVIGATEUR CROISÉ

La propriété transform nécessite des préfixes à prendre en charge par les anciens navigateurs. Des préfixes sont nécessaires pour Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 et IE9. Les transformations CSS ne sont pas prises en charge par IE8 et les versions antérieures.

Voici une déclaration de transformation commune à l'exemple précédent:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Pour plus d'informations, voir canIuse .

PLUS D'INFORMATION

L'élément est positionné en fonction du premier parent non statique ( position: relative , absolute ou fixed ). Explorez plus dans ce violon et ce sujet de documentation .

Pour le centrage horizontal uniquement, utilisez à left: 50% et transform: translateX(-50%) . Il en va de même pour le centrage vertical uniquement: centre avec top: 50% et transform: translateY(-50%) .

L'utilisation d'un élément largeur / hauteur non statique avec cette méthode de centrage peut entraîner un écrasement de l'élément centré. Cela se produit principalement avec des éléments contenant du texte, et peut être corrigé en ajoutant: margin-right: -50%; et margin-bottom: -50%; . Voir ce violon pour plus d'informations.

Utiliser Flexbox

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Voir résultat

HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Voir résultat

Reportez-vous à la section Centrage vertical et horizontal dynamique sous la documentation Flexbox pour plus de détails sur flexbox et leur signification.

Prise en charge du navigateur

Flexbox est pris en charge par tous les principaux navigateurs, à l' exception des versions d'IE antérieures à 10 .

Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent des préfixes de fournisseur .

Pour un moyen rapide de générer des préfixes, il existe Autoprefixer , un outil tiers.

Pour les navigateurs plus anciens (comme IE 8 et 9), un Polyfill est disponible .

Pour un aperçu plus détaillé de la prise en charge du navigateur Flexbox, consultez cette réponse .

Utilisation de la position: absolue

Travailler dans les anciens navigateurs (IE> = 8)

Les marges automatiques, associées à des valeurs nulles pour les décalages left et right ou top et bottom centreront les éléments positionnés de manière absolue dans leur parent.

Voir résultat

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Les éléments qui n'ont pas leur propre largeur et hauteur implicites, comme le font les images, auront besoin de ces valeurs définies.

Autres ressources: Centrage absolu en CSS

Technique d'élément fantôme (hack de Michał Czernow)

Cette technique fonctionne même lorsque les dimensions du conteneur sont inconnues.

Configurez un élément "fantôme" à l'intérieur du conteneur à centrer en hauteur, puis utilisez vertical-align: middle à la fois sur celui-ci et sur l'élément à centrer.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
  <div class="centered"></div>
</div>

Utiliser text-align

Le type de centrage le plus courant et le plus simple est celui des lignes de texte dans un élément. CSS a la règle text-align: center à cette fin:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Cela ne fonctionne pas pour centrer des éléments de bloc entiers . text-align contrôle uniquement l'alignement du contenu en ligne comme le texte dans son élément de bloc parent.

Voir plus sur l' text-align dans la section Typographie .

Centrage par rapport à un autre élément

Nous verrons comment centrer le contenu en fonction de la hauteur d'un élément proche.

Compatibilité: IE8 +, tous les autres navigateurs modernes.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

Lien vers JSFiddle

Les principaux points sont les 3 .thumb , .details et .position-container container:

Le .position-container doit avoir display: table .
Les .details doivent avoir la largeur réelle définie en width: .... et display: table-cell , vertical-align: middle .
Le .thumb doit avoir la width: 100% si vous voulez qu'il prenne tout l'espace restant et il sera influencé par la largeur .details .
L'image (si vous avez une image) à l'intérieur de .thumb devrait avoir la width: 100% , mais ce n'est pas nécessaire si vous avez des proportions correctes.

Vertical aligner n'importe quoi avec 3 lignes de code

Soutenu par IE11 +

Voir résultat

Utilisez ces 3 lignes pour aligner verticalement pratiquement tout. Assurez-vous que la div / image que vous appliquez le code a un parent avec une hauteur.

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Aligner verticalement une image à l'intérieur d'une div

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

Centrage horizontal et vertical à l'aide d'une disposition de tableau

On pourrait facilement centrer un élément enfant en utilisant la propriété d'affichage de la table .

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

Utiliser calc ()

La fonction calc () est la partie d'une nouvelle syntaxe dans CSS3 dans laquelle vous pouvez calculer (mathématiquement) la taille / position de votre élément en utilisant diverses valeurs telles que les pixels, les pourcentages, etc. Remarque: - Lorsque vous utilisez cette fonction , prenez toujours soin de l’espace entre deux valeurs calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

Aligner verticalement les éléments de hauteur dynamique

Appliquer intuitivement css ne produit pas les résultats souhaités car

vertical-align:middle ne s'applique pas aux éléments de niveau bloc
margin-top:auto et margin-bottom:auto valeurs utilisées margin-bottom:auto calculées sur zéro
margin-top:-50% valeurs de marge basées sur un pourcentage de margin-top:-50% sont calculées par rapport à la largeur du bloc contenant

Pour prendre en charge le navigateur le plus large, une solution de contournement avec les éléments d'aide:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle de la question originale . Cette approche

fonctionne avec des éléments de hauteur dynamiques
respecte le flux de contenu
est pris en charge par les navigateurs existants

Utilisation de la hauteur de ligne

Vous pouvez également utiliser la line-height de line-height pour centrer verticalement une seule ligne de texte dans un conteneur:

CSS

div {
    height: 200px;
    line-height: 200px;
}

C'est assez moche, mais peut être utile dans un élément <input /> . La propriété line-height ne fonctionne que lorsque le texte à centrer couvre une seule ligne. Si le texte se divise en plusieurs lignes, le résultat obtenu ne sera pas centré.

Centrage vertical et horizontal sans se soucier de la hauteur ou de la largeur

La technique suivante vous permet d'ajouter votre contenu à un élément HTML et de le centrer horizontalement et verticalement sans vous soucier de sa hauteur ou de sa largeur .

Le récipient extérieur

devrait avoir l' display: table;

Le récipient intérieur

devrait avoir l' display: table-cell;
devrait avoir vertical-align: middle;
devrait avoir text-align: center;

La boîte de contenu

devrait avoir l' display: inline-block;
devrait réajuster l'alignement de texte horizontal sur, par exemple. text-align: left; ou text-align: right; , sauf si vous voulez que le texte soit centré

Démo

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

Voir aussi ce violon !

Centrage à taille fixe

Si la taille de votre contenu est fixe, vous pouvez utiliser le positionnement absolu à 50% avec une margin qui réduit de moitié la largeur et la hauteur de votre contenu:

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

Centrage horizontal avec seulement une largeur fixe

Vous pouvez centrer l'élément horizontalement même si vous ne connaissez pas la hauteur du contenu:

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

Centrage vertical à hauteur fixe

Si vous connaissez la hauteur de l'élément, vous pouvez centrer l'élément verticalement:

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

En utilisant la marge: 0 auto;

Les objets peuvent être centrés en utilisant la margin: 0 auto; s'ils sont des éléments de bloc et ont une largeur définie.

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Résultat:

JSFiddle example: Centrage des objets avec une marge: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS
Centrage

Recherche…

Utiliser la transformation CSS

COMPATIBILITÉ DU NAVIGATEUR CROISÉ

PLUS D'INFORMATION

Utiliser Flexbox

Utilisation de la position: absolue

Technique d'élément fantôme (hack de Michał Czernow)

Utiliser text-align

Centrage par rapport à un autre élément

Vertical aligner n'importe quoi avec 3 lignes de code

Aligner verticalement une image à l'intérieur d'une div

Centrage horizontal et vertical à l'aide d'une disposition de tableau

Utiliser calc ()

Aligner verticalement les éléments de hauteur dynamique

Utilisation de la hauteur de ligne

Centrage vertical et horizontal sans se soucier de la hauteur ou de la largeur

Le récipient extérieur

Le récipient intérieur

La boîte de contenu

Démo

Centrage à taille fixe

Centrage horizontal avec seulement une largeur fixe

Centrage vertical à hauteur fixe

En utilisant la marge: 0 auto;