Comment centrer horizontalement un < div > ;?

Question

Comment centrer horizontalement un < div > dans un autre < div > à l'aide de CSS?

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

Answer 1

Vous pouvez appliquer ce code CSS au

div > :

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

Bien entendu, il n'est pas nécessaire de définir width sur 50% . Toute largeur inférieure à < div > contenant fonctionnera. Le margin: 0 auto correspond au centrage réel.

Si vous ciblez IE8 +, il serait peut-être préférable de le remplacer:

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

Cela centre l'élément intérieur horizontalement et fonctionne sans définir de largeur spécifique.

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>

Answer 2

Si vous ne souhaitez pas définir une largeur fixe sur le div intérieur, vous pouvez procéder de la manière suivante:

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

#inner {
  display: inline-block;
}

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

Cela fait du div intérieur un élément en ligne pouvant ê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>

En fonction de vos possibilités 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

• Lien 2

• Lien 3

• Lien 4

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

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

Answer 4

Supposons que votre div est 200px large:

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

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

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

https://jsfiddle.net/gjvfxxdj/

Answer 5

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

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 au centre même si vous redimensionnez votre écran.

Answer 6

Certaines affiches ont mentionné la méthode CSS pour centrer à l'aide de display: box .

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

Donc, juste pour être complet, voici la dernière méthode de centrer CSS & 3 en utilisant le Module de présentation de boîtes flexibles .

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 devez prendre en charge des navigateurs plus anciens utilisant une syntaxe plus ancienne pour flexbox, , voici un bon endroit pour regarder .

Answer 7

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

Vous pouvez utiliser:

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

Answer 8

Centrage d'un div de hauteur et de largeur inconnues

horizontalement et verticalement. Il fonctionne avec les navigateurs 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>

Pensez-y davantage à Codepen ou à JSBin .

Answer 9

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

Answer 10

La propriété box-align de CSS3

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

Answer 11

Définissez width et définissez margin-left et margin-right sur auto . Toutefois, il s’agit de pour l’horizontale uniquement . 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.

Answer 12

J'ai récemment dû centrer un "masqué". div (c.-à-d. display: none;) contenant un formulaire qui devait être centré sur la page. J'ai écrit le jQuery suivant pour afficher le div & amp; caché puis mettez à jour le CSS avec la largeur générée automatiquement du tableau et modifiez la marge pour le centrer. (La bascule d'affichage est déclenchée en cliquant sur un lien, mais ce code n'a pas été nécessaire pour être affiché.)

REMARQUE: je partage ce code car Google m'a amené à cette solution Stack Overflow & amp; tout aurait fonctionné sauf que les éléments cachés n’ont pas de largeur & amp; 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 & nbsp; 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 dans la prise en charge d'Internet Explorer & Nbsp; Mode Quirks pour les navigateurs hérités.

Answer 15

Voici ma réponse.

#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 de largeur pour l'un des éléments, consiste à utiliser l'attribut CSS 3 transform .

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

Voici un Fiddle illustrant les alignements horizontal et vertical.

Pour plus d'informations, consultez le réseau de développeurs Mozilla .

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'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 pourrait entraîner des 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;
}

Answer 18

Je réalise 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 pensé que je la documenterais.

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

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

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

Answer 19

Par exemple, consultez ce lien et l'extrait de code 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>

Ensuite, consultez cet exemple sur le violon .

Answer 20

Centrer uniquement horizontalement

D'après mon expérience, le meilleur moyen de centrer une zone horizontalement consiste à appliquer les propriétés suivantes:

Le conteneur:

• doit avoir text-align: center;

La zone de contenu:

• doit 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 ce violon !

Centrer horizontalement & amp; verticalement

D'après mon expérience, le meilleur moyen de centrer une zone à la fois verticalement et horizontalement consiste à utiliser un conteneur supplémentaire et à appliquer les propriétés suivantes:

Le conteneur externe:

• doit avoir display: table;

Le conteneur interne:

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

La zone de contenu:

• doit 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 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 - largeur totale
• .inner - aucune largeur définie (mais une largeur maximale peut être spécifiée)

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

1. Retournez .inner à l'intérieur de .center-helper
2. Faites de .center-helper un bloc en ligne; il a la même taille que .inner , ce qui lui confère une largeur de 300 pixels.
3. Appuyez sur .center-helper à 50% à droite par rapport à son parent; cela place sa gauche à 500 px par rapport à. extérieur.
4. Appuyez sur .inner à 50% à gauche par rapport à son parent; cela place sa gauche à -150px par rapport à. center helper qui signifie que sa gauche est à 500 - 150 = 350px par rapport à. extérieur.
5. Définissez le dépassement de capacité 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%;
}

Answer 23

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

Ceci alignera également le #inner verticalement. Si vous ne le souhaitez pas, supprimez les propriétés display et vertical-align ;

Answer 24

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

Answer 25

Alignement du texte: centre

Application de texte -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:

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

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

Marge: 0 auto

Utilisation de margin: 0 auto est une autre option et convient davantage à la compatibilité des navigateurs plus anciens. Il fonctionne avec display: table .

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

#inner {
  display: inline-block;
}

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

Flexbox

display: flex se comporte comme un élément de bloc et en affiche le contenu conformément au modèle de la flexbox. Cela fonctionne avec worth- 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 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

#inner {
  display: inline-block;
}

Transformer

transformer: traduire 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 à gauche : 50% .

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

<*>

< center > (Obsolète)

La balise < center > est l'alternative HTML à text-align: centre . 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é des standards Web.

<*> <*>

Answer 26

Vous pouvez utiliser display: flex pour votre div externe et pour centrer horizontalement, vous devez ajouter motivé-contenu: centre

.

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

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

Answer 27

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érieurs, la seule condition est que ses hauteur et largeur ne soient pas plus grands que ceux de ses conteneur.

Answer 28

Flex dispose de plus de 97% de la prise en charge du navigateur et peut constituer le meilleur moyen de résoudre ce type de problèmes en quelques lignes:

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

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

Il y avait une option 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. Il fonctionne parfaitement à tout moment:

text-align: center;

Et voyez, l'enfant va au centre.

Et enfin le 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 */
}