html vertically Comment centrer horizontalement un<div>?




html center vertically in div (24)

Cette méthode fonctionne aussi très bien:

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

Pour le <div> interne, la seule condition est que sa height et sa width ne doivent pas être supérieures à celles de son conteneur.

Comment centrer horizontalement un <div> dans un autre <div> utilisant CSS?

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

Chris Coyier qui a écrit sur son blog un excellent article sur "Centrer dans l'inconnu". C'est un tour d'horizon de plusieurs solutions. J'ai posté un qui n'est pas posté dans cette question. Il prend davantage en charge les 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;
}

J'ai récemment dû centrer un div "caché" (c'est-à-dire, display: none;) qui contenait un formulaire enregistré qu'il fallait centrer sur la page. J'ai écrit le jQuery suivant pour afficher le div caché puis mettre à jour le CSS à la largeur générée automatiquement du tableau et changer la marge pour le centrer. (La bascule d'affichage est déclenchée en cliquant sur un lien, mais ce code n'a pas été nécessaire pour l'affichage.)

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

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>


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 feriez les deux. N'ayez pas peur d'expérimenter. ce n'est pas comme si tu casserais n'importe quoi.


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

Vous pouvez utiliser:

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

Centrer un div de hauteur et de largeur inconnues

Horizontalement et verticalement. Il fonctionne avec des navigateurs raisonnablement modernes (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.).

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker avec elle plus loin sur Codepen ou sur JSBin .


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;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Cela fait de la div interne un élément en ligne pouvant être centré avec text-align .


Ceci est ma réponse.

#outerDiv {
  width: 500px;
}

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


La façon dont je le fais habituellement utilise la position absolue:

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

La division extérieure n'a pas besoin de propriétés supplémentaires pour que cela fonctionne.


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

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

Une option existait que j'ai trouvée:

Tout le monde dit d'utiliser:

margin: auto 0;

Mais il y a une autre option. Définissez cette propriété pour le parent div. Cela fonctionne parfaitement n'importe quand:

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

Essayez de jouer avec

margin: 0 auto;

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

text-align: center;

Centrage uniquement horizontalement

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

Le conteneur:

  • devrait avoir text-align: center;

La zone de contenu:

  • devrait avoir display: inline-block;

Démo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Voir aussi ce violon !

Centrer horizontalement et verticalement

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

Le conteneur extérieur:

  • devrait avoir display: table;

Le conteneur intérieur:

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

La zone de contenu:

  • devrait avoir display: inline-block;

Démo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Voir aussi ce violon !



Voici ce que vous voulez le plus rapidement possible.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Je me rends compte que je suis assez tard pour le jeu, mais c'est une question très populaire, et j'ai récemment trouvé une approche que je n'ai jamais vue mentionnée nulle part ici, alors j'ai 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.


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


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


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

Voici la structure:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Et voici l'extrait de code JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Si vous souhaitez l'utiliser dans une approche réactive, vous pouvez ajouter les éléments suivants:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Vous pouvez appliquer ce CSS au <div> interne:

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

Bien sûr, vous n'avez pas besoin de régler la width à 50% . Toute largeur inférieure au <div> contenant fonctionnera. La margin: 0 auto correspond au centrage réel.

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

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

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

Exemple de travail ici:

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


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>


J'ai créé cet example pour montrer comment align verticalement et horizontalement .

Le code est fondamentalement ceci:

#outer {
  position: relative;
}

et...

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

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


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

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

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

  1. Envelopper le .inner intérieur du .center-helper
  2. Faites de .center-helper un bloc inline; sa taille est la même que celle de .inner ce qui lui donne une largeur de .inner .
  3. Poussez .center-helper 50% à droite par rapport à son parent; cela place sa gauche à 500 px par rapport à. extérieur.
  4. Poussez .inner 50% à gauche par rapport à son parent; cela place sa gauche à -150px par rapport à. centre helper qui signifie que sa gauche est à 500 - 150 = 350px par rapport à. extérieur.
  5. Définissez overflow sur .outer sur hidden pour empêcher la barre de défilement horizontale.

Démo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

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

Certaines affiches ont mentionné le moyen de centrer CSS 3 à l'aide de display:box .

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

En résumé, voici le dernier moyen de centrer CSS 3 à l’aide du module 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 supporter des navigateurs plus anciens qui utilisent une syntaxe plus ancienne pour flexbox, here's un bon endroit à regarder.







centering