Comment centrer horizontalement un <div>

4290

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Peter Mortensen
la source
13
Parmi ces bonnes réponses, je veux juste souligner que vous devez donner à "#inner" une "largeur", ou ce sera "100%", et vous ne pouvez pas dire s'il est déjà centré.
Jony
1
Joma Tech m'a amené ici
Barbu Barbu
@Barbu Barbu: De quelle manière? Dans quel contexte?
Peter Mortensen

Réponses:

4727

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

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

Bien sûr, vous ne devez pas définir l' widthà 50%. N'importe quelle largeur inférieure au contenant <div>fonctionnera. C'est margin: 0 autoce que fait le centrage réel.

Si vous ciblez Internet Explorer 8 (et versions ultérieures), il peut être préférable de le faire à la place:

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

Il fera le centre de l'élément intérieur horizontalement et cela fonctionne sans définir un spécifique 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>

bharadhwaj
la source
12
Pour le centrage vertical, j'utilise habituellement "line-height" (line-height == height). C'est simple et agréable mais cela ne fonctionne qu'avec un texte de contenu d'une seule ligne :)
Nicolas Guillaume
98
Vous devez utiliser la balise! DOCTYPE sur votre page html pour le faire fonctionner correctement sur IE.
Fabio
15
Notez qu'il peut être nécessaire d'ajouter "float: none;" pour le #inner.
Mert Mertce
15
Vous définissez également les marges supérieure et inférieure sur 0, ce qui n'est pas lié. Mieux vaut mettre margin-left: auto; margin-right: autoje pense.
Emmanuel Touzery
13
Pas nécessairement margin:0 auto: il peut s'agir en margin: <whatever_vertical_margin_you_need> autosecond lieu de la marge horizontale.
YakovL
1247

Si vous ne souhaitez pas définir une largeur fixe à 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.

Alfred
la source
13
@SabaAhang la syntaxe correcte serait float: none;et n'est probablement nécessaire que parce que #inner a hérité floatd'un leftou rightde quelque part ailleurs dans votre CSS.
Doug McLean
8
C'est une bonne solution. Gardez juste à l'esprit que l'héritage intérieur héritera de text-alignsorte que vous voudrez peut-être définir les valeurs intérieures text-alignà initialou une autre valeur.
pmoleri
belle solution, je pense que oui
Simon
381

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 convivialité, vous pouvez également utiliser le box-orient, box-flex, box-direction propriétés.

Fléchir :

#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 cela explique pourquoi le modèle de boîte est la meilleure approche :

Konga Raju
la source
25
Assurez-vous de lire cette réponse avant de commencer à implémenter cette solution.
cimmanon
4
Safari, pour l'instant, nécessite toujours des -webkitdrapeaux pour flexbox ( display: -webkit-flex;et -webkit-align-items: center;et -webkit-justify-content: center;)
Joseph Hansen
Je pense toujours que l'utilisation du code lots est une mauvaise pratique par exemple avec ce code je centre mon div: display: table; marge: auto; simple et facile
simon
Est-ce moi ou cet extrait de code n'est-il pas centré
Mike
En 2020, nous pouvons utiliser flexbox caniuse.com/#feat=flexbox
tonygatta
251

Supposons que votre div mesure 200 pixels de large:

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

nuno_cruz
la source
Je n'aime pas cette solution car lorsque l'élément interne est trop large pour l'écran, vous ne pouvez pas faire défiler horizontalement l'élément entier. marge: 0 auto fonctionne mieux.
Aloso
marge gauche: auto; marge-droite: auto; centre un élément de niveau bloc
killscreen
La largeur par défaut pour la plupart des éléments de niveau bloc est auto, qui remplit la zone disponible à l'écran. Le simple fait de le centrer le place dans la même position que l'alignement à gauche. Si vous souhaitez qu'il soit visuellement centré, vous devez définir une largeur (ou une largeur maximale bien qu'Internet Explorer 6 et versions antérieures ne le prennent pas en charge, et IE 7 ne le prend en charge qu'en mode standard).
killscreen
228

J'ai créé cet exemple pour montrer comment 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.

Tom Maton
la source
12
+1 pour cette méthode, j'étais sur le point d'y répondre. Notez que vous devez déclarer une largeur sur l'élément que vous souhaitez centrer horizontalement (ou une hauteur s'il est centré verticalement). Voici une explication complète: codepen.io/shshaw/full/gEiDt . L'une des méthodes les plus polyvalentes et les plus largement prises en charge pour centrer les éléments verticalement et / ou horizontalement.
stvnrynlds
6
Vous ne pouvez pas utiliser de remplissage dans le div, mais si vous souhaitez donner l'illusion, utilisez une bordure de la même couleur.
Squirrl
Je pense que pour que cette méthode fonctionne, vous devez définir le avec et la hauteur de la
division
212

Certaines affiches ont mentionné la façon de centrer CSS en utilisant display:box.

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

Donc, pour être complet, voici la dernière façon de centrer dans CSS 3 en utilisant le 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 vous souhaitez centrer vos articles 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 */
}

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

Danield
la source
que voulez-vous dire par «la syntaxe est obsolète», est-elle obsolète?
Konga Raju
6
La spécification Flexbox a subi 3 révisions majeures. La version la plus récente date de septembre 2012, ce qui rend officiellement obsolètes toutes les versions précédentes. Cependant, la prise en charge du navigateur est inégale (en particulier les anciens navigateurs Android): stackoverflow.com/questions/15662578/…
cimmanon
Cela a fonctionné pour moi dans Chrome, contrairement à la version de Justin Poliey.
Vern Jensen
N'est-ce pas "justifier-contenu: centre;" pour l'alignement vertical et les "align-items: center;" pour l'alignement horizontal?
Wouter Vanherck
3
@WouterVanherck cela dépend de la flex-directionvaleur. Si c'est «ligne» (par défaut) - alors justify-content: center; c'est pour l'alignement horizontal (comme je l'ai mentionné dans la réponse) Si c'est «colonne» - alors justify-content: center;c'est pour l'alignement vertical.
Danield
140

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

Vous pouvez utiliser:

#element {
    display: table;
    margin: 0 auto;
}
Salman von Abbas
la source
3
mêmes exigences que pour l'affichage: bloc en ligne également ( quirksmode.org/css/display.html )
montrealmike
Je l'ai utilisé aussi, mais je n'en ai jamais rencontré display: table;auparavant. Qu'est ce que ça fait?
Matt Cremeens
97

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>

Essayez- le plus loin sur Codepen ou sur JSBin .

iamnotsam
la source
89

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

gizmo
la source
49
et si vous ne connaissez pas la largeur? Dis parce que le contenu est dynamique?
gman
largeur maximale? que dire de cela?
1
J'utilise width: fit-content;et margin: 0 auto. Je pense que cela peut fonctionner avec une largeur inconnue.
Rick
89

Propriété box-align de CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
neoneye
la source
8
Assurez-vous de lire cette réponse avant de commencer à implémenter cette solution.
cimmanon
88

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

Sneakyness
la source
62

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 de la table et modifier la marge pour la 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>

James Moberg
la source
59

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

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

william44isme
la source
Cela peut ne pas fonctionner si vous avez d'autres divisions en dessous de la division centrée.
NoChance
54

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 en mode Quirks d'Internet Explorer pour la prise en charge des navigateurs hérités.

ch2o
la source
5
Il n'y a pas besoin de propriété d'alignement de texte. C'est complètement inutile.
Touhid Rahman
l'alignement de texte est en fait nécessaire pour qu'il fonctionne en mode rapide IE, donc si cela ne vous dérange pas d'ajouter une petite expression pour prendre en charge les navigateurs plus anciens, gardez-la. (IE8 avec les règles IE8 et IE7 fonctionnent tous les deux sans alignement de texte, il se peut donc que ce soit uniquement IE6 et les
versions
52

Utilisation:

#outerDiv {
  width: 500px;
}

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

Ankit Jain
la source
47

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

Kilian Stinson
la source
2
On peut aussi avoir besoin des préfixes des fournisseurs:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou
45

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 posté un qui n'est pas publié dans cette question. Il prend en charge plus de navigateurs 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;
}
Willem de Wit
la source
39

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.

BenjaminRH
la source
Il suffit de régler cette règle pour #innerseulement: #inner { position:relative; left:50%; transform:translateX(-50%); }. Cela fonctionne pour n'importe quelle largeur.
Jose Rui Santos du
33

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 donc être comme cet exemple sur violon .

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, voyez cet exemple sur le violon .

Lalit Kumar
la source
28

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 zone 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 pour utiliser un conteneur supplémentaire et d' appliquer les propriétés suivantes:

Le conteneur extérieur:

  • avoir dû display: table;

Le récipient intérieur:

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

La zone 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 !

John Slegers
la source
27

La façon la plus simple:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

joan16v
la source
1
Comme le note votre violon, #inner doit avoir une largeur définie.
Michael Terry
#outern'en a pas besoin width:100%;comme le fait <div>toujours par défaut width:100%. et text-align:centern'est pas non plus nécessaire du tout.
Mobarak Ali
27

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 max pourrait être spécifiée)

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

  1. Envelopper à l' .innerintérieur.center-helper
  2. Faites .center-helperun bloc en ligne; il devient la même taille que .innerce qui en fait 300 pixels de large.
  3. Poussez .center-helper50% à droite par rapport à son parent; cela place sa gauche à 500 pixels par rapport à. extérieur.
  4. Poussez .inner50% vers la gauche par rapport à son parent; cela place sa gauche à -150 pixels par rapport à. aide centrale, ce qui signifie que sa gauche est à 500 - 150 = 350 pixels par rapport à. extérieur.
  5. Réglez le débordement sur .outercaché 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>

Salman A
la source
26

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 #innerverticalement. Si vous ne le souhaitez pas, supprimez les propriétés displayet vertical-align;

Kenneth Palaganas
la source
25

Voici ce que vous voulez dans les plus brefs délais.

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 % );
}
caniz
la source
3
Cela le centre verticalement.
Michael Terry
22

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'une des options suivantes:


Marge: 0 auto

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


Flexbox

display: flexse comporte comme un élément de bloc et dispose son contenu selon le modèle 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.


Transformer

transform: translatevous 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 asymétriques. Pour centrer horizontalement il faut position: absoluteet left: 50%.


<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 il n'est pas considéré comme une bonne pratique car cette fonctionnalité est obsolète et a été supprimée des normes Web.

Paolo Forgia
la source
22

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 - CSS flex Property pour plus d'idées.

Milan Panigrahi
la source
21

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

#outer {
  display: flex;
  justify-content: center;
}
Sandesh Damkondwar
la source
21

Eh bien, j'ai réussi à trouver une solution qui conviendrait 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 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);
  })
});
Miguel Leite
la source
21

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 celui de son contenant.

Billal Begueradj
la source
19

J'ai trouvé une option:

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 */
}
Pnsadeghy
la source
travail d'alignement de texte pour l'alignement de texte dans son conteneur et non pour son conteneur à son parent.
Lalit Kumar Maurya
je le teste, j'ai un problème avec définir l'enfant au centre, doit quand vous avez plus d'un enfant, plus de temps marge: 0 réponse de police automatique, mais, alignement du texte au centre, pour le parent, faites que cet enfant soit au centre, même s'ils sont élément et ne pas être du texte, tester et voir ce qui se passe
Pnsadeghy
aligner le texte au centre uniquement. Vous avez raison en ce moment, mais lorsque vous écrivez un conteneur CSS contenant un enfant de largeur et de couleur différentes, votre code ne fonctionne pas. Testez-le à nouveau !!!!
Lalit Kumar Maurya
Voir cet exemple jsfiddle.net/uCdPK/2 et dites-moi ce que vous en pensez !!!!!
Lalit Kumar Maurya