Comment centrer horizontalement une <div>

Question

Comment puis-je centrer horizontalement un <div>dans un autre en <div>utilisant CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 1

Vous pouvez appliquer ce CSS à l'intérieur <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Bien sûr, vous n'êtes pas obligé de définir le widthsur 50%. Toute largeur inférieure à celle du contenant <div>fonctionnera. C'est margin: 0 autoce qui fait le centrage proprement dit.

Si vous ciblez Internet Explorer 8 (et versions ultérieures), il serait peut-être préférable d'avoir ceci à la place:

#inner {
  display: table;
  margin: 0 auto;
}

Cela fera le centre de l'élément intérieur horizontalement et cela fonctionne sans définir de spécificité width.

Exemple de travail ici:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

ÉDITER

Avec, flexboxil est très facile de styliser le div horizontalement et verticalement centré.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Pour aligner le div verticalement centré, utilisez la propriété align-items: center.

Answer 2

Si vous ne voulez pas définir une largeur fixe sur l'intérieur, divvous pouvez faire quelque chose comme ceci:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Cela fait de l'intérieur divun élément en ligne qui peut être centré avec text-align.

Answer 3

Les meilleures approches sont avec CSS 3 .

Modèle de boîte:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Selon votre facilité d'utilisation, vous pouvez également utiliser les box-orient, box-flex, box-directionpropriétés.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

En savoir plus sur le centrage des éléments enfants

• Lien 2

• Lien 3

• Lien 4

Et cela explique pourquoi le modèle de boîte est la meilleure approche :

• Pourquoi le modèle de boîte W3C est-il considéré comme meilleur?

Answer 4

Supposons que votre div ait une largeur de 200 pixels:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Assurez-vous que l'élément parent est positionné , c'est-à-dire relatif, fixe, absolu ou collant.

Si vous ne connaissez pas la largeur de votre div, vous pouvez utiliser à la transform:translateX(-50%);place de la marge négative.

https://jsfiddle.net/gjvfxxdj/

Avec CSS calc () , le code peut devenir encore plus simple:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Le principe est toujours le même; placez l'article au milieu et compensez la largeur.

Answer 5

J'ai créé cet exemple pour montrer comment faire verticalement et horizontalement align .

Le code est essentiellement le suivant:

#outer {
  position: relative;
}

et...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Et il restera dans le centermême lorsque vous redimensionnez votre écran.

Answer 6

Certaines affiches ont mentionné la méthode CSS 3 pour centrer l'utilisation display:box.

Cette syntaxe est obsolète et ne devrait plus être utilisée. [Voir aussi ce post] .

Donc, juste pour être complet, voici la dernière façon de centrer dans CSS 3 à l'aide du module de mise en page de boîte flexible .

Donc, si vous avez un balisage simple comme:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... et que vous souhaitez centrer vos éléments dans la boîte, voici ce dont vous avez besoin sur l'élément parent (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Si vous avez besoin de prendre en charge des navigateurs plus anciens qui utilisent une syntaxe plus ancienne pour flexbox, voici un bon endroit pour regarder.

Answer 7

Si vous ne voulez pas définir une largeur fixe et ne voulez pas de marge supplémentaire, ajoutez display: inline-blockà votre élément.

Vous pouvez utiliser:

#element {
    display: table;
    margin: 0 auto;
}

Answer 8

Centrer un div de hauteur et de largeur inconnues

Horizontalement et verticalement. Il fonctionne avec des navigateurs raisonnablement modernes (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)

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

<div class="content">This works with any content</div>

Bricolez- le plus loin sur Codepen ou sur JSBin .

Answer 9

Réglez widthet réglez margin-leftet margin-rightsur auto. Ce n'est que pour l'horizontale , cependant. Si vous voulez les deux, vous le feriez dans les deux sens. N'ayez pas peur d'expérimenter; ce n'est pas comme si vous cassiez quoi que ce soit.

Answer 10

Il ne peut pas être centré si vous ne lui donnez pas de largeur. Sinon, cela prendra, par défaut, tout l'espace horizontal.

Answer 11

Propriété box-align de CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Answer 12

J'ai récemment dû centrer un div "caché" (c'est-à-dire display:none;) qui contenait un formulaire déposé qui devait être centré sur la page. J'ai écrit le code jQuery suivant pour afficher le div caché, puis mettre à jour le contenu CSS à la largeur générée automatiquement du tableau et modifier la marge pour le centrer. (La bascule d'affichage est déclenchée en cliquant sur un lien, mais ce code n'était pas nécessaire pour s'afficher.)

REMARQUE: je partage ce code, car Google m'a amené à cette solution Stack Overflow et tout aurait fonctionné sauf que les éléments cachés n'ont aucune largeur et ne peuvent être redimensionnés / centrés qu'après leur affichage.

$(function(){ $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 13

La façon dont je le fais habituellement utilise la position absolue:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

La division externe n'a pas besoin de propriétés supplémentaires pour que cela fonctionne.

Answer 14

Pour Firefox et Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Pour Internet Explorer, Firefox et Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

La text-align:propriété est facultative pour les navigateurs modernes, mais elle est nécessaire dans le mode Quirks d'Internet Explorer pour la prise en charge des navigateurs hérités.

Answer 15

Utilisation:

#outerDiv {
  width: 500px;
}

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

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

Une autre solution pour cela sans avoir à définir une largeur pour l'un des éléments consiste à utiliser l' transformattribut CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

L'astuce consiste à translateX(-50%)placer l' #innerélément à 50% à gauche de sa propre largeur. Vous pouvez utiliser la même astuce pour l'alignement vertical.

Voici un violon montrant l'alignement horizontal et vertical.

Plus d'informations sur Mozilla Developer Network .

Answer 17

Chris Coyier qui a écrit un excellent article sur «Centrer dans l'inconnu» sur son blog. C'est un tour d'horizon de plusieurs solutions. J'en ai publié un qui n'est pas publié dans cette question. Il prend plus en charge le navigateur que la solution Flexbox , et vous n'utilisez pas display: table;ce qui pourrait casser d'autres choses.

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

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 18

J'ai récemment trouvé une approche:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Les deux éléments doivent avoir la même largeur pour fonctionner correctement.

Answer 19

Par exemple, consultez ce lien et l'extrait ci-dessous:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Si vous avez beaucoup d'enfants sous un parent, votre contenu CSS doit être comme cet exemple sur violon .

Le look du contenu HTML aime ceci:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Ensuite, voyez cet exemple sur le violon .

Answer 20

Centrage uniquement horizontalement

D'après mon expérience, la meilleure façon de centrer une boîte horizontalement est d'appliquer les propriétés suivantes:

Le conteneur:

• avoir dû text-align: center;

La boîte de contenu:

• avoir dû display: inline-block;

Démo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

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

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Voir aussi ce violon !

---

Centrage horizontal et vertical

D'après mon expérience, la meilleure façon de centrer une boîte à la fois verticalement et horizontalement est d'utiliser un conteneur supplémentaire et d'appliquer les propriétés suivantes:

Le conteneur extérieur:

• avoir dû display: table;

Le conteneur intérieur:

• avoir dû display: table-cell;
• avoir dû vertical-align: middle;
• avoir dû text-align: center;

La boîte de contenu:

• avoir dû display: inline-block;

Démo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

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

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Voir aussi ce violon !

Answer 21

Le moyen le plus simple:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 22

Si la largeur du contenu est inconnue, vous pouvez utiliser la méthode suivante . Supposons que nous ayons ces deux éléments:

• .outer -- pleine largeur
• .inner - pas de largeur définie (mais une largeur maximale peut être spécifiée)

Supposons que la largeur calculée des éléments soit de 1000 pixels et 300 pixels respectivement. Procédez comme suit:

1. Envelopper à l' .innerintérieur.center-helper
2. Créez .center-helperun bloc en ligne; il devient de la même taille que .inner300 pixels de large.
3. Poussez .center-helper50% vers la droite par rapport à son parent; cela place sa gauche à 500 pixels wrt. extérieur.
4. Poussez .inner50% vers la gauche par rapport à son parent; cela place sa gauche à -150 pixels par rapport. centre d'assistance ce qui signifie que sa gauche est à 500 - 150 = 350 pixels par rapport. extérieur.
5. Définissez le dépassement sur .outermasqué pour empêcher la barre de défilement horizontale.

Démo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Answer 23

Tu peux faire quelque chose comme ça

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Cela alignera également le #innerverticalement. Si vous ne le souhaitez pas, supprimez les propriétés displayet vertical-align;

Answer 24

Alignement du texte: centre

L'application text-align: centerdu contenu en ligne est centrée dans la zone de ligne. Cependant, comme le div interne a par défaut, width: 100%vous devez définir une largeur spécifique ou utiliser l'un des éléments suivants:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

Marge: 0 auto

L'utilisation margin: 0 autoest une autre option et elle est plus adaptée à la compatibilité des navigateurs plus anciens. Cela fonctionne avec display: table.

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

Flexbox

display: flexse comporte comme un élément de bloc et présente son contenu selon le modèle de la flexbox. Cela fonctionne avec justify-content: center.

Remarque: Flexbox est compatible avec la plupart des navigateurs mais pas avec tous. Voir display: flex ne fonctionne pas sur Internet Explorer pour une liste complète et à jour de la compatibilité des navigateurs.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

Transformer

transform: translatevous permet de modifier l'espace de coordonnées du modèle de mise en forme visuelle CSS. En l'utilisant, les éléments peuvent être traduits, pivotés, mis à l'échelle et inclinés. Pour centrer horizontalement, il faut position: absoluteet left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

<center> (Obsolète)

La balise

est l'alternative HTML à text-align: center. Cela fonctionne sur les anciens navigateurs et la plupart des nouveaux, mais ce n'est pas considéré comme une bonne pratique car cette fonctionnalité est obsolète et a été supprimée des normes Web.

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Answer 25

Voici ce que vous voulez de la manière la plus courte.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Answer 26

Flex a une couverture de support de navigateur de plus de 97% et pourrait être le meilleur moyen de résoudre ce type de problèmes en quelques lignes:

#outer {
  display: flex;
  justify-content: center;
}

Answer 27

Vous pouvez utiliser display: flexpour votre div externe et pour centrer horizontalement, vous devez ajouterjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

ou vous pouvez visiter w3schools - Propriété CSS flex pour plus d'idées.

Answer 28

Cette méthode fonctionne également très bien:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Pour l'intérieur <div>, la seule condition est que son heightet widthne doit pas être plus grand que ceux de son contenant.

Answer 29

Eh bien, j'ai réussi à trouver une solution qui conviendra peut-être à toutes les situations, mais qui utilise JavaScript:

Voici la structure:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Et voici l'extrait de code JavaScript:

$(document).ready(function() { $('.container .content').each( function() {
    container = $(this).closest('.container'); content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Si vous souhaitez l'utiliser dans une approche réactive, vous pouvez ajouter les éléments suivants:

$(window).resize(function() { $('.container .content').each( function() {
    container = $(this).closest('.container'); content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Answer 30

Une option existait que j'ai trouvée:

Tout le monde dit d'utiliser:

margin: auto 0;

Mais il y a une autre option. Définissez cette propriété pour le div parent. Cela fonctionne parfaitement à tout moment:

text-align: center;

Et voyez, l'enfant va au centre.

Et enfin CSS pour vous:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}