Comment centrer horizontalement une

Comment centrer horizontalement une

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

 <div id="outer">
  <div id="inner">Foo foo</div>
</div>
  
Montrez la meilleure réponse

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 si elle est déjà centrée.

Joma Tech m'a amené ici

@Barbu Barbu: De quelle manière? Dans quel contexte?

Vous pouvez appliquer ce CSS au <div> interne:

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

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

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

Pour le centrage vertical, j'utilise généralement "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 :)

dans certains cas, il serait nécessaire d'écrire la clause !important pour le style de marge de la div interne, par exemple lorsque vous avez écrit quelque chose comme ceci outer div {margin: 0.5em;}

Vous devez utiliser la balise! DOCTYPE sur votre page html pour qu'elle fonctionne correctement sur IE.

quelqu'un peut-il expliquer comment display: table fonctionne? pourquoi les éléments avec ce style appliqué se réduisent automatiquement à la taille des éléments intérieurs

Notez qu'il peut être nécessaire d'ajouter "float: none;" pour le #inner.

@Zhanger FYI: <div style="display: table;">stuff</div> est identique à <table>stuff</table> . Assigner l'affichage de cette façon indique simplement au navigateur de restituer l'élément sous forme de tableau.

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: auto je pense.

Pour prendre en charge les navigateurs mobiles, je ne recommande pas d'utiliser width: 50% . Utilisez plutôt quelque chose comme max-width: 300px .

Cela fonctionne bien sur Chrome mais ne prend PAS en charge les navigateurs mobiles comme Safari.

CSS margin:0 auto ne fonctionnera pas lorsque le div a une propriété position autre que relative , comme dans le cas de position:absolute

Pourquoi devons-nous spécifier la largeur?

Pas forcément margin:0 auto : cela peut être margin: <whatever_vertical_margin_you_need> auto seconde étant la marge horizontale.

Pourquoi text-align: center; est-il obsolète?

C'est loin d'être une solution parfaite car tout ce qui se trouve à l'intérieur du DIV interne doit être affiché comme un élément de tableau

a voté le plus mais pas une meilleure solution. la meilleure façon de le faire est d'utiliser la combinaison des balises div et span, de la propriété block css et du cross browser inline-block, et le centre de texte fera le simple magin

Pourquoi cela ne fonctionne pas si l'élément interne est button et non un div .

Parce que "input" est un élément en ligne et doit être centré par "text-align: center".

@Winter text-align: centre; n'est pas obsolète

@amachreetamunoemi pensez-vous cela? alors pourriez-vous demander une meilleure solution

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

et si vous ne connaissez pas la largeur? Dire parce que le contenu est dynamique?

largeur maximale? que dire de cela?

J'utilise width: fit-content; et margin: 0 auto . Je pense que cela peut fonctionner avec une largeur inconnue.

Définissez width et définissez margin-left et margin-right sur auto . C'est pour l'horizontale uniquement , cependant. Si vous voulez les deux, vous le feriez des deux côtés. N'ayez pas peur d'expérimenter; ce n'est pas comme si vous cassiez quoi que ce soit.

Si vous ne voulez pas définir une largeur fixe sur le div intérieur, 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 transforme le div interne en un élément en ligne qui peut être centré avec text-align .

@SabaAhang la syntaxe correcte pour cela serait float: none; et n'est probablement nécessaire que parce que #inner a hérité d'un float de left ou right ailleurs dans votre CSS.

C'est une bonne solution. Gardez simplement à l'esprit que inner héritera de text-align donc vous voudrez peut-être définir le text-align de l'intérieur sur initial ou une autre valeur.

belle solution je pense que oui

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 masqués n'ont pas de largeur et ne peuvent pas être redimensionnés / centrés jusqu'à ce qu'ils soient 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>  

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 , relative, fixe, absolue ou persistante.

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/

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'élément au milieu et compensez la largeur.

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 l'ensemble de l'élément horizontalement. marge: 0 auto fonctionne mieux.

marge gauche: auto; marge droite: auto; centre un élément de niveau bloc

La largeur par défaut de la plupart des éléments de niveau bloc est auto, qui remplit la zone disponible à l'écran. Le simple fait d'être centré le place dans la même position que l'alignement à gauche. Si vous souhaitez qu'il soit centré visuellement, vous devez définir une largeur (ou une largeur maximale bien qu'Internet Explorer 6 et les versions antérieures ne le prennent pas en charge, et IE 7 ne le prend en charge qu'en mode standard).

Propriété box-align de CSS 3

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

Assurez-vous de lire cette réponse avant de commencer à mettre en œuvre cette solution.

Si vous ne souhaitez 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;
}
  

mêmes exigences que l'affichage: bloc en ligne également ( quirksmode.org/css/display.html)

J'ai aussi utilisé cela, mais je n'ai jamais rencontré display: table; auparavant. Qu'est ce que ça fait?

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 Quirks d'Internet Explorer pour la prise en charge des anciens navigateurs.

Il n'y a pas besoin de propriété text-align. C'est complètement inutile.

text-align est en fait nécessaire pour qu'il fonctionne en mode Quicks IE, donc si cela ne vous dérange pas d'ajouter une petite expression pour prendre en charge les navigateurs plus anciens, gardez-le là. (IE8 avec les règles IE8 et les règles IE7 fonctionnent tous les deux sans text-align, il se peut donc que seuls IE6 et les versions antérieures soient concernés)

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

Assurez-vous de lire cette réponse avant de commencer à mettre en œuvre cette solution.

Safari, à partir de maintenant, nécessite toujours des indicateurs -webkit pour flexbox (display: -webkit-flex; et -webkit-align-items: center; et -webkit-justify-content: center; )

Je pense toujours que l'utilisation de beaucoup de code est une mauvaise pratique par exemple avec ce code je centre mon div: display: table; marge: automatique; simple et facile

Est-ce moi ou cet extrait de code n'est-il pas centré

En 2020, nous pouvons utiliser flexbox caniuse.com/#feat=flexbox

Avatar Ray

Centrage: marges à largeur automatique

Cette boîte est centrée horizontalement en définissant ses largeurs de marge droite et gauche sur "auto". C'est le moyen préféré d'accomplir le centrage horizontal avec CSS et fonctionne très bien dans la plupart des navigateurs prenant en charge CSS 2. Malheureusement, Internet Explorer 5 / Windows ne répond pas à cette méthode - une lacune de ce navigateur, pas la technique.

Il existe une solution de contournement simple. (Une pause pendant que vous repoussez la nausée provoquée par ce mot.) Prêt? Internet Explorer 5 / Windows applique incorrectement l'attribut CSS "text-align" aux éléments de niveau bloc. Déclarer "text-align: center" pour l'élément de niveau bloc contenant (souvent l'élément BODY) centre horizontalement la boîte dans Internet Explorer 5 / Windows.

Il y a un effet secondaire de cette solution de contournement: l'attribut CSS "text-align" est hérité, centrant le contenu en ligne. Il est souvent nécessaire de définir explicitement l'attribut "text-align" pour la zone centrée, neutralisant les effets de la solution de contournement Internet Explorer 5 / Windows. Le CSS pertinent suit.

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}
 

http://bluerobot.com/web/css/center1.html

Ce n'est pas centrer le div, c'est centrer le texte.

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.

Cela peut ne pas fonctionner si vous avez d'autres divs sous le div centré.

Certaines affiches ont mentionné la manière CSS 3 de centrer en utilisant display:box .

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

Par souci d'exhaustivité, voici la dernière façon de centrer en CSS 3 en utilisant le Module de disposition 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 d'anciens navigateurs utilisant une syntaxe plus ancienne pour flexbox, voici un bon endroit pour regarder .

qu'entendez-vous par «la syntaxe est obsolète», est-elle obsolète?

La spécification Flexbox a subi 3 révisions majeures. Le projet le plus récent date de septembre 2012, ce qui annule officiellement tous les projets précédents. Cependant, la prise en charge des navigateurs est inégale (en particulier les anciens navigateurs Android): stackoverflow.com/questions/15662578/...

Cela a fonctionné pour moi dans Chrome, contrairement à la version de Justin Poliey.

N'est-ce pas le "justify-content: center;" pour l'alignement vertical et les "align-items: center;" pour l'alignement horizontal?

@WouterVanherck cela dépend de la valeur flex-direction . Si c'est 'row' (par défaut) - alors justify-content: center; est pour l'alignement horizontal (comme je l'ai mentionné dans la réponse) Si c'est 'column' - alors justify-content: center; est pour le alignement vertical.

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.

Définissez simplement cette règle pour #inner uniquement: #inner { position:relative; left:50%; transform:translateX(-50%); } . Cela fonctionne pour n'importe quelle largeur.

J'ai appliqué le style en ligne à la div interne. Utilisez celui-ci:

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

Utilisez:

 #outerDiv {
  width: 500px;
}

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

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 center même lorsque vous redimensionnez votre écran.

+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 en cas de centrage vertical). Voici une explication complète: codepen.io/shshaw/full/gEiDt . Une des méthodes les plus polyvalentes et les plus largement acceptées pour centrer les éléments verticalement et / ou horizontalement.

Vous ne pouvez pas utiliser de remplissage dans le div, mais si vous voulez donner l'illusion, utilisez une bordure de la même couleur.

Je pense que pour que cette méthode fonctionne, vous devez définir le avec et la hauteur de la div intérieure

Utilisez le contenu CSS ci-dessous pour #inner div:

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

J'utilise principalement ce contenu CSS pour centrer les div s.

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 ;

Chris Coyier qui a rédigé un excellent article sur le "Centrage dans le 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 les navigateurs que la solution Flexbox , et vous n'utilisez pas display: table; qui pourrait casser d'autres choses.

 

Une belle chose que j'ai récemment trouvée, mélangeant l'utilisation de line-height+vertical-align et de l'astuce de gauche 50% , vous pouvez center une boîte de taille dynamique à l'intérieur d'une autre boîte de taille dynamique, à la fois horizontalement et verticalement en utilisant du CSS pur.

Notez que vous devez utiliser des spans (et inline-block ), testés dans les navigateurs modernes + Internet Explorer 8. 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 l'exemple ici .

Essayez de jouer avec

margin: 0 auto;
 

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

text-align: center;
 

text-align fonctionne pour l'alignement du texte dans son conteneur et non pour son conteneur vers son parent.

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. Il 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 */
}
 

text-align fonctionne pour l'alignement du texte dans son conteneur et non pour son conteneur vers son parent.

je le teste, j'ai un problème avec set child to center, doit quand vous avez plus d'un enfant, plus de fois margin: 0 réponse de police automatique, mais, text-align center, for parent make this child be center, even if they are element and pas être texte, tester et voir ce qui se passe

texte au centre d'alignement du texte uniquement. Vous avez raison en ce moment, mais lorsque vous écrivez un conteneur css qui contient un enfant avec une largeur et une couleur différentes, votre code ne fonctionne pas. Testez à nouveau !!!!

Consultez cet exemple jsfiddle.net/uCdPK/2 et dites-moi ce que vous en pensez !! !!!

<center>
 

Je suis gâté avec le centre le plus simple connu?

</center>
 

Cela a fonctionné pour moi et je ne sais pas pourquoi ce n'est pas la réponse. Quelqu'un peut-il expliquer ce qui ne va pas avec cela?

@DaveWalley fonctionne bien, il y a 2 bonnes raisons pour lesquelles ce n'est pas une bonne réponse. La première question était pour une solution CSS et c'est une solution HTML pure. 2ème la balise CENTER était déjà obsolète en HTML 4

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 ressembler à cet exemple sur violon .

L'aspect 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, consultez cet exemple sur le violon .

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

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

  1. Enveloppez .inner dans .center-helper
  2. Faites de .center-helper un bloc en ligne; il devient de la même taille que .inner , ce qui en fait 300 pixels de large.
  3. Poussez .center-helper 50% vers la droite par rapport à son parent; cela place sa gauche à 500 pixels par rapport. externe.
  4. Poussez .inner 50% vers la gauche par rapport à son parent; cela place sa gauche à -150 pixels wrt. centre d'aide ce qui signifie que sa gauche est à 500 - 150 = 350 pixels par rapport. externe.
  5. Définissez le dépassement de .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>  

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

Cela le centre verticalement.

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 ce qui suit:

$(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);
  })
});
 

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 cette peut être un doublon. Voici mon avis :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
 

Oui, je pense que c'est un double. La meilleure réponse de Justin Poliey a résolu le problème de la même manière.

Centrage d'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 .

Essayez ceci:

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

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>  

Comme votre violon le note, #inner doit avoir une largeur définie dessus.

#outer n'a pas besoin de width:100%; car le <div> par défaut a toujours width:100% . et text-align:center n'est pas non plus nécessaire du tout.

J'utilise simplement la solution la plus simple, mais elle 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>
 

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

$(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;");
});
 

Tout d'abord: vous devez donner une largeur au 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, il prendra toute la largeur de la ligne.

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 le div au centre de la vue (vertical et horizontal), taille et ajuste la taille, centre l'image d'arrière-plan (vertical et horizontal), centre le texte (horizontal) et garde div dans la vue et au-dessus de le contenu. Placez simplement le HTML body et profitez-en.

Une autre solution pour cela sans avoir à définir une 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%);
}
 

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

Voici un Fiddle montrant l'alignement horizontal et vertical.

Plus d'informations sur Mozilla Developer Network .

On peut également avoir besoin de préfixes de fournisseur: -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);

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

Merci d'avoir essayé d'aider l'OP :). Vous ne devez pas ajouter de réponses qui sont exactement les mêmes que les réponses déjà fournies. Je suppose que la collision est une erreur, mais cela aurait pu être complètement copié et collé à partir de la réponse acceptée.

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

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

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

margin: 0 auto; float: none;
 

Oui, c'est un code court et clair pour l'alignement horizontal.

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

Je partage cette réponse pour les concepteurs qui souhaitent aligner leur contenu horizontalement et verticalement. Ou vous pouvez dire au centre de la page Web. Veuillez aller sur ce site pour télécharger le fichier.

Code CSS

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
 

La meilleure façon est d'utiliser l'affichage de cellule de tableau (intérieur) qui vient exactement après un div avec le tableau d'affichage (extérieur) et de définir l'alignement vertical pour le div intérieur (avec affichage de cellule de tableau) et chaque balise que vous utilisez dans le div interne placé au centre du div ou de la 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>  

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:

  • doit avoir text-align: center;

La boîte 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 !


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:

  • doit avoir display: table;

Le conteneur interne:

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

La boîte 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 !

C'est tellement simple.

Décidez simplement de la largeur que vous voulez donner à la div interne et utilisez le CSS suivant.

CSS

.inner{
  width: 500px; /* Assumed width */
  margin: 0 auto;
}
 

Avatar Qmr

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

Après avoir lu toutes les réponses, je n'ai pas vu celle que je préfère. C'est ainsi que vous pouvez centrer un élément dans 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;
}
 

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 .

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/

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 le <div> interne, la seule condition est que ses height et width ne doivent pas être plus grands que ceux de son conteneur.

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.

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

Jetez un œil au code ci-dessous, cela vous permettra de 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>  

Donnez un peu de width au div interne et ajoutez margin:0 auto; dans la propriété CSS.

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

n'ajoutez que le centre d'alignement du texte dans votre div parent (externe) afin que leur classe enfants prenne automatiquement ce css

Vous pouvez utiliser CSS Flexbox .

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

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

Veuillez ajouter quelques explications sur les technologies que vous utilisez et leur fonctionnement Un lien de référence conviendrait.

C'est possible en utilisant CSS 3 Flexbox . Vous avez deux méthodes lorsque vous utilisez Flexbox.

  1. Définissez le display:flex; parent 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>  

  2. Définissez le display:flex parent 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>  

Ajoutez du CSS à votre div interne. Définissez margin: 0 auto et définissez sa largeur à moins de 100%, qui est 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é.

En quoi est-ce différent des nombreuses autres réponses qui semblent faire la même chose?

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

<HTML

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

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

La réponse la plus simple: ajoutez 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érifiez mon lien CodePen : http://codepen.io/feizel/pen/QdJJrK

 Entrez la description de l'image ici

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>  

CSS 3:

Vous pouvez utiliser le style suivant sur le conteneur parent pour répartir les éléments enfants uniformément horizontalement:

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

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

 Entrez la description de l'image ici

CanIUse: Compatibilité du 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>  

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

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

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

Le moyen le plus connu qui est largement utilisé et fonctionne dans de nombreux navigateurs , y compris les anciens, consiste à utiliser 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. De plus, il y a deux choses importantes que vous ne devez pas oublier dans votre CSS lorsque vous essayez de centrer de cette façon: margin: 0 auto; . Cela en fait le centre div comme souhaité. De plus, n'oubliez pas width de l'enfant, sinon il ne sera pas centré comme prévu!

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

Voici un exemple:

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

Je suis désolé mais ce bébé des années 90 vient de travailler pour moi:

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

Vais-je en enfer pour ce péché?

La balise <center> est obsolète depuis HTML4, comme Idra expliqué dans les commentaires

@ Garric15 J'essaie juste d'encourager certaines personnes qui continuent peut-être à perdre des heures et des heures de travail pour résoudre un très petit problème simplement parce qu'elles ne veulent pas utiliser une balise obsolète comme

bien que cela continue de fonctionner parfaitement dans certains cas. La balise
était obsolète mais rien d'aussi simple et efficace que de la remplacer décemment dans tous les cas.

Vous pouvez utiliser le lien https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p= aperçu

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}
 

Reportez-vous à https://v4-alpha.getbootstrap.com/examples/cover/

Le deuxième lien semble être (effectivement) rompu.

Vous pouvez ajouter ce code:

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

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>  

Merci pour votre réponse! Si vous pensez que votre réponse apporte quelque chose de précieux à la question, assurez-vous d'expliquer davantage votre code, ce qu'il fait et pourquoi cela fonctionne, merci!

cela a fonctionné pour moi. la plupart du temps, le bloc d'affichage, puis la marge automatique pour la division interne ne fonctionne pas, mais avec le flex d'affichage dans la division externe, cela fonctionnait très bien. Merci beaucoup. Je n'ai pas essayé le flex d'affichage avant.

moi aussi. en utilisant la table d'affichage également grande. ma autre réponse. stackoverflow.com/questions/5703552/...

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

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

Utilisez:

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

Style:

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

Si vous voulez le centrer horizontalement, vous devez écrire comme ci-dessous:

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

Vous pouvez utiliser la méthode calc. L'utilisation est pour la div que vous centrez. Si vous connaissez sa largeur, disons qu'il s'agit de 1200 pixels, optez pour:

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

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

Utilisez ce code:

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

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

Utilisez:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
 

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

Voici une autre façon de centrer horizontalement à l'aide de 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 de la droite et de la gauche.

L'utilisation de flex:1 sur un pseudo élément les fera remplir les espaces restants et prendre la même taille et le conteneur interne sera 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 considérer la même situation pour l'alignement vertical en changeant 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>  

Avatar Anu

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

Veuillez également ajouter quelques explications.

Avatar Anu

Les principaux attributs pour centrer le div sont margin: auto et width: selon les exigences:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
 

Avatar Anu

Merci pour cet extrait de code, qui pourrait fournir une aide limitée et immédiate. Une explication appropriée améliorerait considérablement sa valeur à long terme en montrant pourquoi c'est une bonne solution au problème, et le rendrait plus utile aux futurs lecteurs avec d’autres questions similaires. Veuillez modifier votre réponse pour ajouter des explications, y compris les hypothèses que vous avez formulées.

Cela centralise votre div intérieur horizontalement et verticalement:

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

Pour un alignement horizontal uniquement, modifiez

margin: 0 auto;
 

et pour le vertical, changez

margin: auto 0;
 

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

 <!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px;
          margin: 0 auto;
          background: brown;
          color: red;
    }

</style>

  </head>

  <body>

    <div class="outer">
      <div class="inner">This DIV is centered</div>
    </div>

  </body>
</html>  

Veuillez essayer ceci. Il fonctionnera sans la balise HTML center.

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 violon

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

Une explication s'impose.

Cela va sûrement centrer votre #inner horizontalement et verticalement. Ceci est également compatible dans 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 voulez que l'aligner horizontalement, 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>  

L'un des moyens les plus simples de le faire est d'utiliser display: flex . La div externe a juste besoin d'avoir un affichage flexible, et l'intérieur a besoin de margin: 0 auto pour la centrer horizontalement.

Pour centrer verticalement et simplement centrer un div dans un 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>  

Vous pouvez le faire en utilisant Flexbox qui est une bonne technique de nos jours.

Pour utiliser Flexbox, vous devez donner display: flex; et align-items: center; à votre parent ou à l'élément div #outer . Le code devrait ressembler à 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, donc 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 être comme 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é. Flexbox est la nouvelle méthode de positionnement des éléments dans des piles horizontales ou verticales avec CSS et est compatible avec 96% des navigateurs mondiaux. Vous êtes donc libre de l’utiliser et si vous souhaitez en savoir plus sur Flexbox, visitez article CSS-Tricks . À mon avis, c'est le meilleur endroit pour apprendre à utiliser Flexbox.

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
 

Pour la chose normale si vous utilisez div de manière statique.

Si vous voulez qu'un div soit centré lorsque div est absolu par rapport à son parent, voici un exemple:

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

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

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.

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

#inner {
    width: 100%;
    max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
    left: 65px; /* This has to be approximately the same as the max-width. */
}
 

Une réponse très simple et multi-navigateurs au centre horizontal est d'appliquer cette règle à l'élément parent:

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

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

Re "width 100%; ": Voulez-vous dire "width: 100%; "?

Faites simple!

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

Une explication s'impose.

Vous pouvez simplement utiliser Flexbox comme ceci:

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

Appliquer l'Autoprefixer pour tous les navigateurs pris en charge:

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

Ou bien

Utilisez la transformation :

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

Pour une DIV centrée horizontalement:

 #outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}
  
 <div id="outer">
  <div id="inner">Foo foo</div>
</div>
  

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

utiliser ci-dessus css pour l'alignement du centre div

Salut! Cette réponse a été jugée de faible qualité en raison de sa longueur et de son contenu. Cela se produit parce que les réponses au code uniquement sont généralement déconseillées sur SO et doivent être accompagnées d'une explication textuelle de la façon dont le code est une solution à la question. Merci!

Une explication s'impose.

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

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

Centrer un div à l'intérieur d'un div horizontalement :

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

 Entrez la description de l'image ici

Centrer un div à l'intérieur d'un div verticalement :

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

 Entrez la description de l'image ici

Et, pour centrer complètement le div verticalement et horizontalement:

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

 Entrez la description de l'image ici

Vous pouvez ajouter un autre div qui a la même taille de #inner et le déplacer vers la gauche de -50% (la moitié de la largeur de #inner) et #inner de 50%.

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

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

Veuillez mettre un texte montrant ce que vous avez fait et pourquoi vous l'avez fait

L'un des moyens les plus simples ...

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

Voici le meilleur exemple pour centrer horizontalement un

 #outer {
    display: flex;
    align-items: center;
    justify-content: center;
}  
 <!DOCTYPE html>
<html>
    <head>

    </head>

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

Si vous avez un parent d'une certaine taille, dites body{height: 200px} ou comme ci-dessous, a parent div # external avec une hauteur de 200px, puis ajoutez le contenu CSS comme ci-dessous

HTML:

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

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}
 

Ensuite, le contenu enfant, disons le contenu centré sur div #, sera verticalement ou horizontalement au milieu, sans utiliser de position CSS. Pour supprimer le comportement vertical du milieu, modifiez simplement le code CSS ci-dessous:

#centered {
  margin: 0px auto;
}
 

ou

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

Démo: https://jsfiddle.net/jinny/p3x5jb81/5/

Pour ajouter uniquement une bordure pour montrer que le div interne n'est pas à 100% par défaut:

 #outer{
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #000000;
}
#centered {
  margin: auto;
  border: 1px solid #000000;
}  
 <div id="outer">
  <div id="centered">Foo foo</div>
</div>  

DEMO: http://jsfiddle.net/jinny/p3x5jb81/9

si vous regardez jsfiddle.net/jinny/p3x5jb81/9 , je viens d'ajouter une bordure à montre que dans mon cas, le div centré n'est pas à 100%, il prend la taille / longueur du contenu du texte. Si le texte centré a une longueur de contenu plus grande que la div externe que je suis d'accord, nous devons donner une largeur à la div interne. Mais ma solution prend en charge l'exemple de cas donné.

Ajoutez simplement ce contenu CSS dans votre fichier CSS. Il centrera automatiquement le contenu.

Alignez horizontalement au centre en CSS:

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

Aligner verticalement + horizontal au centre en CSS:

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

Cela a fonctionné pour moi pour centrer les boutons de Datatables.

Avec Sass (syntaxe SCSS), vous pouvez le faire avec un mixin :

Avec translate

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}
 

Dans une balise HTML:

<div class="center-horizontally">
    I'm centered!
</div>
 

N'oubliez pas d'ajouter position: relative; à l'élément HTML parent.


Avec Flexbox

En utilisant flex , vous pouvez faire ceci:

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}
 

Dans une balise HTML:

<div class="center-horizontally">
    <div>I'm centered!</div>
</div>
 

Essayez ce CodePen !

J'ai utilisé Flexbox ou Grille CSS

  1. Flexbox

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

  2. Grille CSS

     #outer {
        display: inline-grid;
        grid-template-rows: 100px 100px 100px;
        grid-template-columns: 100px 100px 100px;
        grid-gap: 3px;
    }  

Vous pouvez résoudre le problème de plusieurs manières.

Dans les exemples précédents, ils ont dit avec margin: 0 auto , display:table et d'autres réponses comme "avec transformer et traduire".

Et qu'en est-il simplement avec une balise? Tout le monde sait qu'il existe une balise <center> qui ne prend tout simplement pas en charge HTML5. Mais cela fonctionne en HTML5. Par exemple, dans mes anciens projets.

Et cela fonctionne, mais maintenant non seulement MDN Web Docs, mais d'autres sites Web sont conseillant de ne plus l'utiliser. Ici, dans Puis-je utiliser , vous pouvez voir les notes de MDN Web Docs. Mais quoi qu'il en soit, il existe un tel moyen. C'est juste pour savoir. Être toujours remarqué à propos de quelque chose est tellement utile.

 Entrez la description de l'image ici

<center> n'est qu'une balise prédéfinie, non ajustable, pas flexible comme en CSS. Cela fonctionne toujours mais ce sont l'un des derniers restes vivants, tout comme et . Obsolète ne signifie pas que cela ne fonctionnera plus à l'avenir ... cela signifie également que les nouvelles technologies, que ce soit via un nœud réagissant en utilisant JSX ou d'autres MVC complexes qui génèrent des DOM virtuels, pourraient ne pas être pleinement capables de fonctionner. Le fait qu'ils fonctionnent toujours en HTML5 bien qu'ils ne soient pas pris en charge signifie que w3c ne le maintient plus. Aussi SEO: les sites Web avec HTML obsolète peuvent signaler aux moteurs de recherche un code obsolète qui pourrait nuire à votre classement.