web-dev-qa-db-fra.com

Comment centrez-vous facilement horizontalement un <div> en utilisant CSS?

J'essaie de centrer horizontalement un élément de bloc <div> sur une page et de le définir sur une largeur minimale. Quel est le moyen le plus simple de faire cela? Je veux que l'élément <div> soit aligné avec le reste de ma page. Je vais essayer de dessiner un exemple:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text
csshtml
666
cmcginty

Dans le cas d'une largeur non fixée div (c'est-à-dire que vous ne savez pas combien d'espace la div occupera).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Gardez à l'esprit que la largeur de #yourdiv est dynamique -> elle s'agrandira et se réduira pour s'adapter au texte qu'elle contient.

Vous pouvez vérifier la compatibilité du navigateur sur Caniuse

731
Tivie

Dans la plupart des navigateurs, cela fonctionnera:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

Dans IE6, vous devrez ajouter une autre variable div extérieure:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>

556
Antony Scott
margin: 0 auto;

comme ck a dit , min-width n'est pas supporté par tous les navigateurs

55
Russ Cam

Le titre de la question et le contenu sont en fait différents, je vais donc poster deux solutions pour cela en utilisant Flexbox.

Je suppose que Flexbox remplacera/ajoutera à la solution standard actuelle au moment où IE8 et IE9 seront complètement détruits;)

Consultez le tableau de compatibilité actuel du navigateur pour flexbox

Elément unique

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Plusieurs éléments mais un seul centre

Le comportement par défaut est flex-direction: row qui alignera tous les éléments enfants sur une seule ligne. Le régler sur flex-direction: column aidera les lignes à être empilées.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>

36
Manoj Kumar

CSS,HTML: 

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Votre diagramme montre également un élément de niveau bloc (qu’est généralement un div), pas un élément en ligne.

min-width est pris en charge dans FF2 +/Safari3 +/IE7 +. Cela peut être fait pour IE6 en utilisant hackety CSS, ou un simple morceau de JS.

27
sjh

Si les anciens navigateurs ne sont pas un problème, utilisez HTML5/CSS3. S'ils le sont, appliquez des polyfill et utilisez quand même HTML5/CSS3. Je suppose que votre division n’a pas de marges ni de rembourrages ici, mais ils sont relativement faciles à comptabiliser. Le code suit.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Ce que cela fait est: 

  1. Positionnez la div par rapport à son conteneur;
  2. Positionnez la limite gauche de la div à 50% de la largeur du conteneur horizontalement;
  3. Reculez horizontalement par 50% de la largeur de div.

Il est facile d’imaginer ce processus pour confirmer que la div serait finalement centrée horizontalement. En bonus, vous pouvez centrer verticalement sans aucun coût supplémentaire:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

L’avantage de cette approche est qu’il n’est pas nécessaire de faire quelque chose de contre-intuitif, comme considérer votre div comme un texte, de l’envelopper dans un conteneur supplémentaire (souvent sémantiquement inutile), ou de lui donner une largeur fixe, toujours possible.

N'oubliez pas les préfixes du vendeur pour transform si nécessaire.

26
wh1t3cat1k
.center {
   margin-left: auto;
   margin-right: auto;
}

La largeur minimale n'est pas globalement prise en charge, mais peut être implémentée à l'aide de

.divclass {
   min-width: 200px;
}

Ensuite, vous pouvez définir votre div pour être 

<div class="center divclass">stuff in here</div>
25
cjk

Vous devez utiliser position: relative et text-align: center sur l'élément parent, puis display: inline-block sur l'élément enfant que vous souhaitez centrer. Ceci est un modèle de conception CSS simple qui fonctionnera sur tous les principaux navigateurs. Voici un exemple ci-dessous ou consultez le Exemple CodePen .

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}
<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>

10
Joshua Pekera

vous pouvez utiliser margin: 0 auto sur votre css au lieu de margin-left: auto; margin-right: auto;

8
Zawarudo

Veuillez utiliser le code ci-dessous et votre div sera au centre.

.class-name {
    display:block;
    margin:0 auto;
}
6
RiyazAhmed

Si vous connaissez la largeur de votre div et que celle-ci est corrigée, vous pouvez utiliser le css suivant:

margin-left: calc(50% - 'half-of-your-div-width');

où 'demi-de-votre-div-largeur' devrait être (évidemment) la moitié de la largeur de votre div.

4
P.Petkov

Après neuf ans, j'ai pensé qu'il était temps d'apporter une nouvelle version. Voici mes deux (et maintenant un) favoris.

Marge

Définissez margin sur auto. Vous devez savoir que la séquence de direction est margin: *top* *right* *bottom* *left*; ou margin: *top&bottom* *left&right*

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

Centre: Désprivé, ne l'utilisez pas!

Utilisez les balises <center></center> pour envelopper votre <div></div>.

Exemple:

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>
            <center>
                <div>The div</div>
            </center>
        </article>
    </body>
</html>

4
Orry Vandermeulen

Si votre <div> a position: absolute, vous devez utiliser width: 100%;

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

    #child {
        display: inline-block;
    }
2
Marcio Mazzucato

J'ajoute ici la bonne réponse

Vous pouvez utiliser ce code d'extrait et le personnaliser. Ici, j'utilise 2 blocs enfants. Cela devrait montrer le centre de la page . Vous pouvez utiliser un ou plusieurs blocs.

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>
2
CodeSnippet

.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}
<div class="center">
  <div>You text</div>
</div>

JsFiddle

2
Lex

Ajoutez cette classe à votre fichier css, elle fonctionnera parfaitement.

1) créer cette première

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) ajoutez ceci à votre css

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
}
1
Urvashi Bhatt

Utilisation de margin-left: auto et margin-right: auto peut ne pas fonctionner dans certaines situations. Voici une solution qui fonctionnera toujours. Vous spécifiez une largeur requise et définissez une marge gauche sur la moitié de la largeur restante.

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>
1
azakgaim

Dans votre fichier html, vous écrivez:

<div class="banner">
  Center content
</div>

votre fichier css vous écrivez:

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

travaille pour moi.

1
krekto

La meilleure réponse à cette question est d'utiliser margin-auto, mais pour l'utiliser, vous devez connaître la width de votre div dans px ou %.

Code CSS:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}
0
Ayman EL Ouafi

J'utilise des balises div et span avec des propriétés css telles que block, inline-block et multi-alignement, voir mon exemple simple

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>
0
amachree tamunoemi