Comment centrer horizontalement un dans un autre ?

Comment puis-je centrer horizontalement un

dans un autre

aide de CSS (si c’est même possible)?

 
Foo foo

    Vous pouvez appliquer ce CSS à la

    interne:

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

    Bien entendu, vous ne devez pas définir la width à 50% . Toute largeur inférieure à celle qui contient

    fonctionnera. La margin: 0 auto est ce que fait le centrage réel.

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

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

    Cela rendra l’élément interne centré horizontalement et il fonctionnera sans définir une width spécifique.

    Exemple de travail ici:

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

    Si vous ne voulez pas définir une largeur fixe sur la div interne, vous pouvez faire quelque chose comme ceci:

     #outer { width: 100%; text-align: center; } #inner { display: inline-block; } 
     
    Foo foo

    Les meilleures approches sont avec CSS 3 .

    Modèle de boîte:

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

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

    Flex :

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

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

    • Lien 2

    • Lien 3

    • Lien 4

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

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

    Supposons que votre div soit large de 200px :

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

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

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

    https://jsfiddle.net/gjvfxxdj/

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

    Le code est essentiellement celui-ci:

     #outer { position: relative; } 

    et…

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

    et il restra au center même lorsque vous redimensionnez votre écran.

    Certaines affiches ont mentionné le CSS 3 comme moyen de centrer 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 le dernier moyen de centrer le CSS 3 en utilisant le module de mise en forme de boîte flexible .

    Donc, si vous avez un balisage simple comme:

     
    A
    B
    C

    … et que vous voulez 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; } 
     
    A
    B
    C

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

    La propriété box-align de CSS3

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

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

    Centrage d’un div de hauteur et de largeur inconnues

    Horizontalement et verticalement Il fonctionne avec des navigateurs relativement 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%); } 
     
    This works with any content

    Définissez la width et définissez margin-left et margin-right sur auto . C’est pour horizontal seulement , cependant. Si vous voulez les deux, vous le feriez dans les deux sens. N’ayez pas peur d’expérimenter; ce n’est pas comme si vous cassiez quelque chose.

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

    NOTE: 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 pas être redimensionnés / centrés tant qu’ils ne sont pas affichés.

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

    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.

    Pour Firefox et Chrome:

     
    Text

    Ceci est ma réponse.

     #outerDiv { width: 500px; } #innerDiv { width: 200px; margin: 0 auto; } 
     
    Inner Content

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

     /* This parent can be any width and height */ .outer { text-align: center; } /* The ghost, nudged to maintain perfect centering */ .outer:before { content: '.'; display: inline-block; height: 100%; vertical-align: middle; width:0; overflow:hidden; } /* The element to be centered, can also be of any width and height */ .inner { display: inline-block; vertical-align: middle; width: 300px; } 

    Une autre solution sans avoir à définir une largeur pour l’un des éléments consiste à utiliser l’atsortingbut de transform CSS 3.

     #outer { position: relative; } #inner { position: absolute; left: 50%; transform: translateX(-50%); } 

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

    Voici un violon montrant l’alignement horizontal et vertical.

    Plus d’informations sont sur Mozilla Developer Network .

    Je me rends compte que je suis assez en retard sur 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 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.

    Par exemple, voir 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. */ } 
     
    Foo foo

    Centrage horizontal seulement

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

    Le conteneur:

    • devrait avoir text-align: center;

    La zone de contenu:

    • devrait avoir l’ 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; } 
     
    Center this!

    Le moyen le plus simple:

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

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

    Vous pouvez faire quelque chose comme ça

     #container { display: table; width: ; height: ; } #inner { width: ; 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 d’ display et d’ vertical-align ;

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

    Voici la structure:

     
    Your content goes here!
    Your content goes here!
    Your content goes here!

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

    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

    interne, la seule condition est que sa height et sa width ne soient pas plus grandes que celles de son conteneur.

    Text-align: centre

    Application de text-align: center le contenu en ligne est centré dans la zone de ligne. Cependant, comme la div interne a par défaut une width: 100% vous devez définir une largeur spécifique ou utiliser l’une des options suivantes:

    • display: block
    • display: inline
    • display: inline-block
     #inner { display: inline-block; } #outer { text-align: center; } 
     
    Foo foo

    Essayez de jouer avec

     margin: 0 auto; 

    Si vous voulez aussi centrer votre texte, essayez d’utiliser:

     text-align: center; 

    Flex prend en charge plus de 97% de la prise en charge des navigateurs et pourrait constituer le meilleur moyen de résoudre ces problèmes en quelques lignes:

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

    Une option existait que j’ai trouvée:

    Tout le monde dit d’utiliser:

     margin: auto 0; 

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

     text-align: center; 

    Et voyez, l’enfant va au centre.

    Et enfin CSS pour vous:

     #outer{ text-align: center; display: block; /* Or inline-block - base on your need */ } #inner { position: relative; margin: 0 auto; /* It is good to be */ } 

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

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

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

    1. Enveloppez .inner intérieur de .center-helper
    2. Faire de .center-helper un bloc en ligne; il devient de la même taille que .inner ce qui le rend large de 300px.
    3. Appuyez sur .center-helper 50% par rapport à son parent; cela place sa gauche à 500px wrt. extérieur.
    4. Poussez .inner 50% restant par rapport à son parent; cela place sa gauche à -150px wrt. aide de centre qui signifie que sa gauche est à 500 – 150 = 350px wrt. extérieur.
    5. Définissez le débordement sur .outer sur caché 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; } 
     

    A div with no defined width

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Duis condimentum sem non turpis consectetur blandit.
    Donec dictum risus id orci ornare tempor.
    Proin pharetra augue a lorem elementum molestie.
    Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.