web-dev-qa-db-fra.com

Comment centrer horizontalement un <div>?

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

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
htmlcssalignmentcentering
3840
Lukas

Vous pouvez appliquer ce CSS au <div> intérieur:

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

Bien sûr, vous n'avez pas besoin de définir la width sur 50%. Toute largeur inférieure au <div> contenant fonctionnera. Le margin: 0 auto est ce que fait le centrage réel.

Si vous ciblez IE8 +, il pourrait être préférable d’avoir ceci à la place:

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

L'élément interne sera centré horizontalement et fonctionnera sans définir une width spécifique.

Exemple de travail ici:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

4316
Justin Poliey

Si vous ne voulez pas définir une largeur fixe sur la div intérieure, vous 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 la div intérieure un élément en ligne pouvant être centré avec text-align.

1160
Alfred

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

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

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

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

329
Konga Raju

Supposons que votre div est 200px wide:

.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 transform:translateX(-50%); au lieu de la marge négative.

https://jsfiddle.net/gjvfxxdj/

231
nuno_cruz

J'ai créé cet exemple pour montrer comment verticalement et horizontalementalign.

Le code est fondamentalement ceci:

#outer {
  position: relative;
}

et...

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

et il restera dans la center même lorsque vous redimensionnez votre écran.

210
Tom Maton

Certaines affiches ont mentionné le moyen de centrer CSS 3 en utilisant display:box.

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

En résumé, voici le dernier moyen de centrer CSS 3 à l’aide du module Flexible Box Layout.

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 pour 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 supporter des navigateurs plus anciens qui utilisent une syntaxe plus ancienne pour flexbox voici un bon endroit pour chercher.

175
Danield

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

Vous pouvez utiliser:

#element {
    display: table;
    margin: 0 auto;
}
127
Salman Abbas

La propriété box-align de CSS3

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

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

79
gizmo

Définissez width et définissez margin-left et margin-right sur auto. C'est pour horizontal seulement , cependant. Si vous voulez les deux, vous feriez les deux. N'ayez pas peur d'expérimenter. ce n'est pas comme si tu casserais n'importe quoi.

78
Sneakyness

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>

Tinker avec elle plus loin sur Codepen ou sur JSBin .

77
iamnotsam

J'ai récemment dû centrer un div "caché" (c'est-à-dire, display: none;) contenant un formulaire enregistré qui devait être centré sur la page. J'ai écrit le jQuery suivant pour afficher le div caché puis mettre à jour le CSS à la largeur générée automatiquement du tableau et changer 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 l'affichage.)

REMARQUE: Je partage ce code car Google m'a amené à cette solution Stack Overflow. Tout aurait fonctionné sauf que les éléments masqués n'ont pas de largeur et ne peuvent pas être redimensionnés/centrés tant qu'ils ne sont pas affichés.

$(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>

55
James Moberg

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 extérieure n'a pas besoin de propriétés supplémentaires pour que cela fonctionne.

49
william44isme

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 propriété text-align: est facultative pour les navigateurs modernes, mais elle est nécessaire en mode Internet Explorer Quirks pour la prise en charge des navigateurs hérités.

48
ch2o

Ceci est ma réponse.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

43
Ankit Jain

Une autre solution consiste à utiliser l'attribut CSS 3 transform, sans avoir à définir de largeur pour l'un des éléments.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

L'astuce est que translateX(-50%) définit l'élément #inner à 50% à gauche de sa propre largeur. Vous pouvez utiliser le même truc pour l'alignement vertical.

Voici un Fiddle montrant les alignements horizontal et vertical.

Plus d'informations sur Réseau de développeurs Mozilla .

39
Kilian Stinson

Chris Coyier qui a écrit sur son blog un excellent post sur 'Centrer dans l'inconnu'. C'est un tour d'horizon de plusieurs solutions. J'ai posté un qui n'est pas posté dans cette question. Il prend en charge davantage les navigateurs que la solution flexbox et vous n’utilisez pas display: table;, ce qui risquerait de casser d’autres problèmes. 

/* 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;
}
38
Willem de Wit

Je me rends compte que je suis assez tard pour le jeu, mais c'est une question très populaire, et j'ai récemment trouvé une approche que je n'ai jamais vue mentionnée nulle part ici, alors j'ai décidé de la documenter.

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

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

EDIT: les deux éléments doivent avoir la même largeur pour fonctionner correctement.

33
BenjaminRH

Par exemple, voir 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 ressembler à ceci exemple sur fiddle .

Le contenu HTML ressemble à 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>

Puis voyez ceci exemple sur le violon .

28
Lalit Kumar

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>

25
joan16v

Centrage uniquement horizontalement

D'après mon expérience, le meilleur moyen de centrer une boîte horizontalement est d'appliquer les propriétés suivantes:

Le conteneur:

  • devrait avoir text-align: center;

La zone de contenu:

  • devrait avoir 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 this Fiddle !

Centrer horizontalement et verticalement

D'après mon expérience, le meilleur moyen de centrer une boîte les deux verticalement et horizontalement est d'utiliser un conteneur supplémentaire et d'appliquer les propriétés suivantes:

Le conteneur extérieur:

  • devrait avoir display: table;

Le conteneur intérieur:

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

La zone de contenu:

  • devrait avoir 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 this Fiddle !

25
John Slegers

Voici ce que vous voulez le plus rapidement possible. 

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 % );
}
22
caniz

Vous pouvez 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 #inner verticalement. Si vous ne le souhaitez pas, supprimez les propriétés display et vertical-align;

22
Kenneth Palaganas

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 est respectivement 1000px et 300px. Procédez comme suit:

  1. Envelopper .inner dans .center-helper
  2. Faites de .center-helper un bloc en ligne; sa taille est la même que celle de .inner, ce qui lui donne une largeur de 300 pixels.
  3. Poussez .center-helper 50% à droite par rapport à son parent; cela place sa gauche à 500 px par rapport à. extérieur.
  4. Push .inner 50% à gauche par rapport à son parent; cela place sa gauche à -150px par rapport à. centre helper qui signifie que sa gauche est à 500 - 150 = 350px par rapport à. extérieur.
  5. Définissez le dépassement sur .outer sur masqué 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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
21
Salman A

Texte-aligner: centre

En appliquant text-align: center le contenu en ligne est centré dans la zone de ligne. Cependant, puisque la division interne a par défaut width: 100%, vous devez définir une largeur spécifique ou utiliser l'un des éléments suivants:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Marge: 0 auto

Utiliser margin: 0 auto est une autre option et convient mieux à 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: flex se comporte comme un élément de bloc et en affiche le contenu conformément au modèle de flexbox. Cela fonctionne avec justify-content: center .

Remarque: Flexbox est compatible avec la plupart des navigateurs, mais pas avec tous. Voir ici 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: translate vous permet de modifier l'espace de coordonnées du modèle de formatage visuel CSS. En l'utilisant, les éléments peuvent être traduits, pivotés, mis à l'échelle et inclinés. Pour centrer horizontalement, il faut position: absolute et 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 <center> est l'alternative HTML à text-align: center . Il fonctionne sur les anciens navigateurs et sur 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>

21
Paolo Forgia

Eh bien, j'ai réussi à trouver une solution qui conviendra peut-être à toutes les situations, mais 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);
  })
});
19
Miguel Leite

Vous pouvez utiliser display: flex pour votre div externe et pour centrer horizontalement, vous devez ajouter justify-content: center

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

ou vous pouvez visiter w3schools - CSS flex Property pour plus d’idées.

19
Milan Panigrahi

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 parent div. 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 */
}
18
Pnsadeghy

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

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

Cette méthode fonctionne aussi très bien:

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

Pour le <div> intérieur, la seule condition est que ses height et width ne doivent pas être plus grandes que celles de son conteneur.

18
Billal Begueradj

Essayez de jouer avec 

margin: 0 auto;

Si vous souhaitez également centrer votre texte, essayez d’utiliser:

text-align: center;
17
user1817972

Si quelqu'un souhaite une solution jQuery pour center aligner ces divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
17
sarath

vous pouvez simplement utiliser flexbox comme ceci:

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Appliquez le préfixe automatique à tous les navigateurs

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

OU SINON

utiliser transformer :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

avec Autoprefixer:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
7
Shashin Bhayani

CSS 3:

Vous pouvez utiliser le style suivant sur le conteneur parent pour répartir les éléments enfants de manière uniforme horizontalement:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Une belle DEMO concernant les différentes valeurs pour justify-content.

 Enter image description here

CanIUse: Compatibilité navigateur

Essayez-le !:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

7
Legends

J'ai appliqué le style inline à div interne. Utilisez celui-ci. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
7
aamirha
#inner {
    width: 50%;
    margin: 0 auto;
}
6
anand jothi

Vous pouvez y parvenir en utilisant la CSS Flexbox. Il vous suffit d'appliquer 3 propriétés à l'élément parent pour que tout fonctionne correctement.

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

Regardez le code ci-dessous, cela vous aidera à mieux comprendre les propriétés.

En savoir plus sur CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

6
Saurav Rastogi

C'est une bonne chose que j'ai récemment trouvée, en combinant l'utilisation de line-height + vertical-align et du truc 50% à gauche, vous pouvez center une boîte de taille dynamique dans une autre boîte de taille dynamique, à la fois horizontalement et verticalement, à l'aide de CSS pur. 

Notez que vous devez utiliser des étendues (et inline-block) testées dans les navigateurs modernes + IE8 .HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Voir exemple ici . 

6
Josh Mc

Que diriez-vous du CSS ci-dessous pour #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

J'utilise principalement ce CSS pour centrer div.

5
Rajesh

Centrer un div dans un div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

3
antelove

Faites simple!

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3
Hassan Siddiqui

Je viens d'utiliser la solution la plus simple, mais cela fonctionne dans tous les navigateurs:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
3
Gerald Goshorn

Utilisation:

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

Style:

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

Si vous souhaitez le centrer horizontalement, vous devez écrire comme suit:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

C'est possible avec CSS 3 flexbox . Vous avez deux méthodes lorsque vous utilisez flex box.

  1. Définissez le parent display:flex; et ajoutez les propriétés {justify-content:center; ,align-items:center;} à votre élément parent.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. Définissez le parent display:flex et ajoutez margin:auto; à l'enfant.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

3
Dream Hunter

Il peut également être centré horizontalement et verticalement en utilisant un positionnement absolu, comme ceci:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3
Agu Dondo

Vous pouvez utiliser la flexbox.

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

Vous pouvez en apprendre plus à ce sujet sur ce lien: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3
Cyan Baltazar

Je voulais répondre à cela car j'ai remarqué que personne ne mentionnait la méthode calc. L'usage concerne la div que vous centrez, si vous connaissez sa largeur, disons que c'est 1200 pixels, optez pour:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Donc, en gros, cela va ajouter une marge gauche de 50% moins la moitié de la largeur connue.

2
serdarsenay

Le moyen le plus connu, largement utilisé et utilisé dans de nombreux navigateurs y compris les anciens, utilise margin comme ci-dessous:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Exécutez le code pour voir comment cela fonctionne. Il y a également 2 choses importantes que vous ne devez pas oublier dans votre CSS lorsque vous essayez de centrer de cette façon: margin: 0 auto; qui en fait le centre div souhaité, sans oublier width de l'enfant sinon il ne sera pas centré comme prévu! 

2
Alireza

Nous pouvons utiliser FLEXBOX pour y parvenir très facilement:

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

Centrer une div à l'intérieur d'une div HORIZONTALEMENT:

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

enter image description here

Centrer une div à l'intérieur d'une div VERTICALEMENT:

#outer { 
  display: flex;
  align-items: center;
    }

enter image description here

Et pour bien centrer le div verticalement et horizontalement:

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

enter image description here

J'espère que cela a été utile pour certains sur vous. Bon codage!

2
Appy Sharma
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
2
pavelbere

À compter de 2019, cette question suscitant encore de nombreux succès, une réponse très simple et transversale à un centre horizontal consiste à appliquer cette règle à l'élément parent:

.parentBox {
 display: flex;
 justify-content: center
}
2
Ady Ngom

Voici un autre moyen de centrer horizontalement en utilisant flexbox et sans spécifier de largeur au conteneur interne. L'idée est d'utiliser des pseudo-éléments qui pousseront le contenu interne à droite et à gauche.

Utiliser flex:1 sur le pseudo-élément leur permettra de remplir les espaces restants et de prendre la même taille et le conteneur interne deviendra centré.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Nous pouvons également envisager la même situation pour l'alignement vertical en modifiant simplement la direction de flex en colonne:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

2
Temani Afif

Cela centralise votre div interne horizontalement et verticalement:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Pour seulement aligner horizontalement, changer

margin: 0 auto;

et pour vertical, changement

margin: auto 0;
1
Shivam Chhetri

CSS

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

HTML

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

Après avoir lu toutes les réponses, je n'ai pas vu celle que je préfère. Voici comment centrer un élément sur un autre. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/ 

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

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

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
1
Mardok

Vous pouvez ajouter ce code:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Rafiqul Islam

Selon votre situation, la solution la plus simple pourrait être:

margin:0 auto; float:none;
1
Justin Munce

La réponse la plus facile ajoute margin: auto; à l'intérieur.

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

code css

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

vérifier mon lien codepen http://codepen.io/feizel/pen/QdJJrK

 enter image description here

1
Faizal Munna

Donnez une width à la div intérieure et ajoutez margin:0 auto; dans la propriété CSS.

1
Mr.Pandya

Utilisation:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

Oui, il s'agit d'un code court et clair pour l'alignement horizontal. J'espère que vous aimez ce code.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
1
Banti Mathur

Utilisez le code ci-dessous.

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
1
Faizal

Utilisez ce code:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
1
Husain Ahmed

Vous pouvez le faire en utilisant un flex-box qui est une bonne technique de nos jours . Pour utiliser un flex-box, vous devez donner display: flex; et align-items: center; à votre élément parent ou #outer div. Le code devrait être comme ceci:

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Cela devrait centrer votre enfant ou #inner div horizontalement. Mais vous ne pouvez réellement voir aucun changement. Parce que notre #outer div n'a pas de hauteur ou, en d'autres termes, sa hauteur est définie sur auto, de sorte qu'il a la même hauteur que tous ses éléments enfants. Donc, après un peu de style visuel, le code de résultat devrait ressembler à ceci:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Vous pouvez voir que #inner div est maintenant centré. Flex-box est la nouvelle méthode de positionnement des éléments dans des piles horizontales ou verticales avec CSS. Il offre une compatibilité de 96% pour les navigateurs mondiaux. Donc, vous êtes libre de l’utiliser et si vous voulez en savoir plus sur Flex-box, visitez CSS-Tricks article, c’est le meilleur endroit pour apprendre à utiliser Flex-box à mon avis.

1
Morteza Sadri

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

1
Qmr

C'est si simple.

Décidez simplement de la largeur que vous souhaitez donner à la division interne et utilisez le code CSS suivant.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
1
Gaurav Aggarwal

Cela va sûrement centrer votre #inner horizontalement et verticalement. Ceci est également compatible avec tous les navigateurs. Je viens d'ajouter un style supplémentaire juste pour montrer comment il est centré.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Mais bien sûr, si vous ne souhaitez que l'alignement horizontal, cela peut vous aider.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Mark Salvania

Vous pouvez utiliser une seule ligne de code, uniquement text-align:center.

Voici un exemple:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

1
Yahya Essam

L’une des manières les plus simples de procéder consiste à utiliser display: flex. La division externe doit simplement avoir un écran flexible, et la division interne nécessite margin: 0 auto pour le centrer horizontalement.

Pour centrer verticalement et centrer simplement une div dans une autre div, veuillez regarder les commentaires de la classe .inner ci-dessous

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

1
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
1
Majid Sadr

n des moyens les plus faciles ...

<!DOCTYPE html> 
<html>
 <head>
    <style>
        #outer-div {
        width: 100%; 
        text-align: center;
        background-color: #000 
        }
        #inner-div {
        display: inline-block; 
        margin: 0 auto;
        padding: 3px;
        background-color: #888
        }
    </style>
 </head>
 <body>
    <div id ="outer-div" width="100%">
        <div id ="inner-div"> I am a easy horizontally centered div.</div>
    <div>
 </body>
</html>
1
Asmit

Je suis désolé, mais ce bébé des années 1990 a simplement TRAVAILLÉ pour moi:

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

Est-ce que je vais en enfer pour ce péché?

1
Heitor

Le meilleur que j'ai utilisé dans mes différents projets est 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

lien de violon

1
Jaison

Nous pourrions utiliser la classe CSS suivante qui permet de centrer verticalement et horizontalement n'importe quel élément par rapport à son parent:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
Elias MP

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

0
Fahad Uddin

Le meilleur moyen consiste à utiliser un affichage de cellules (interne) qui suit exactement une division avec la table d'affichage (externe) et de définir l'alignement vertical pour la division interne (avec un affichage de cellules de table) et chaque balise que vous utilisez dans la division interne placée. au centre de div ou page.

Remarque: vous devez définir une hauteur spécifiée sur externe.

C’est la meilleure façon de savoir sans position relative ou absolue, et vous pouvez l’utiliser dans tous les navigateurs de la même manière.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

0
hossein ghaem

Au lieu de plusieurs wrappers et/ou de marges automatiques, cette solution simple fonctionne pour moi:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Il place la division au centre de la vue (verticale et horizontale), redimensionne et ajuste la taille, centre l'image de fond (verticale et horizontale), centre le texte (horizontal) et conserve la division dans la vue et au-dessus du contenu. Placez-vous simplement dans la variable HTML body et profitez-en.

0
Cees Timmerman

Essayez ceci:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
0
Ajay Gupta

cela a fonctionné pour moi:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

Dans ce code, vous devez déterminer la largeur de l'élément.

0
Fatemeh Khosravi Farsani

J'ai trouvé similaire avec margin-left, mais peut être aussi left.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
0
iorgu

Vous pouvez ajouter un autre div ayant la même taille de #inner et le déplacer vers la gauche de -50% (la moitié de la largeur de #inner) et de #inner de 50%. Désolé pour mon anglais

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

#inner > div {
  position: relative;
        left: -50%;
  }
<div id="outer">  
  <div id="inner"><div>Foo foo</div></div>
</div>
0
user204580

Ajoutez du CSS à votre div. Définissez margin: 0 auto et définissez sa largeur inférieure à 100%, qui correspond à la largeur du div externe.

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

Cela donnera le résultat souhaité.

0
Joseph

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

0
Anu

Je sais que je suis un peu en retard pour répondre à cette question, et je n'ai pas pris la peine de lire chaque réponse, donc ceci peut être un doublon. Voici ma prise :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
0
uSeRnAmEhAhAhAhAhA
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan

Simplement simplement Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

0
Sankar

Ajouter text-align:center; au div parent 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

ou 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

0
Friend

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

Les principaux attributs permettant de centrer la div sont margin: auto et width: en fonction des besoins:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

pour chose normale si vous utilisez div statique

si vous voulez que div soit centré quand div est absolu par rapport à son parent, voici l'exemple:

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

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}
0
Mohammed Rabiulla RABI

Vous pouvez le faire d'une manière différente. Voir les exemples ci-dessous:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
0
Gaurang Sondagar

Essaye ça:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
0
hossein ketabi

Tout d'abord: vous devez donner une largeur à la deuxième div:

Par exemple:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

Notez que si vous ne lui donnez pas de largeur, cela prendra toute la largeur de la ligne.

0
user3968801