web-dev-qa-db-fra.com

Comment centrer une div dans une autre div?

J'ai un problème. J'ai le code HTML comme ceci:

<div id="main_content" >
    <div id="container">
    </div>
</div>

Les css aiment ça: 

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

Je suppose que le #container sera centré dans #main_content. Cependant, ce n'est pas le cas. Je veux juste découvrir la raison et comment le centrer.

htmlcsscss3
93
user2142709

Vous devez définir la largeur du conteneur. (auto ne fonctionnera pas)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

La référence CSS par MDN explique tout.

Découvrez ces liens

Mise à jour - En action @ jsFiddle

80
ShuklaSannidhya

Techniquement, votre DIV interne (#container) est centrée horizontalement. La raison pour laquelle vous ne pouvez pas le savoir est que, avec la propriété CSS width: auto, la division interne étend à la même largeur que son parent. 

Voir ce violon: http://jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

Dans cet exemple, je règle simplement la largeur de #container sur 50px et le fond sur red afin que vous puissiez voir qu'il est centré.

Je pense que la vraie question est "Comment centrer des éléments horizontalement avec CSS?" et la réponse est (tambour roule s'il vous plaît): ça dépend!

Je ne ferai pas une synthèse complète des innombrables manières de centrer les choses avec CSS lorsque W3Schools le fait si bien ici: http://www.w3schools.com/css/css_align.asp mais l’idée de base est que pour les éléments de niveau bloc, vous devez simplement spécifier la largeur souhaitée et définir les marges gauche et droite sur auto.

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
 }

Remarque: Cette réponse ne s'applique qu'aux éléments de niveau BLOCK! Pour positionner un élément INLINE, vous devez utiliser la propriété text-align: center sur le premier parent BLOCK.

27
Jeremiah

Une autre façon intéressante: violon

css

.container{
    background:yellow;
    width: %100;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.centered-div{
    width: 80%;
    height: 190px;
    margin: 10px;
    padding:5px;
    background:blue;
    color:white;
}

html

<div class="container">
    <div class="centered-div">
        <b>Enjoy</b>
    </div>
</div>
13
iraj jelodari

Vous pouvez centrer float div avec ce petit code:

#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;

margin-top: -100px;
margin-left: -100px;
}
11
Zilberman Rafael

Maintenant, définissez votre 

#main_contenttext-align:center et définissez votre #containerdisplay:inline-block; 

comme ça  

#main_content{
text-align:center;
}
#container{
display:inline-block;
vertical-align:top;
}
8
Rohit Azad

cela fonctionnerait en donnant à la largeur #container div: 80% [toute largeur inférieure au contenu principal et en%, de sorte qu'elle se gère bien à gauche et à droite] et en donnant une marge: 0px auto; OR marge: 0 auto; [les deux fonctionnent bien]. 

4
Vish

Essayez d'ajouter

text-align: center;

à votre déclaration css de conteneur parent. Et suivant le conteneur enfant:

display: inline-block;

Ça doit faire l'affaire.

4
Arman P.

Je voudrais essayer de définir une largeur plus spécifique, pour commencer. Il est difficile de centrer quelque chose qui couvre déjà toute la largeur:

#container {
  width: 400px;
}
3
Jason Sears
#main_content {    
    width: 400px; margin: 0 auto;
    min-height: 300px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: auto;
    margin: 0 auto;background-color: #ccc;
    padding: 10px;
    position: relative;
}

essayez ceci testé ok. live check sur jsfiddle

3
Web Designer cum Promoter

voici la solution 

 #main_content {
background-color: #2185C5;
height: auto;
margin: 0 auto;
min-height: 500px;
position: relative;
width: 800px;
 }
3
Atif Azad

Peut-être que vous voulez comme ceci: Demo

html ...

<div id="main_content">
<div id="container">vertical aligned text<br />some more text here
</div>
</div>

css ..

#main_content{
width: 500px; 
height: 500px; 
background: #2185C5; 
display: table-cell; 
text-align: center; 
vertical-align: middle; 
}
#container{
width: auto; 
height: auto; 
background: white; 
display: inline-block; 
padding: 10px;
}

Comment? >>> Dans une cellule de tableau, aligner verticalement avec le milieu sera centré verticalement sur l'élément et text-align: center; fonctionnera comme un alignement horizontal sur l'élément. Remarqué pourquoi #container est dans inline-block coz c'est en état de row. Des questions?

3
Bhojendra Rauniyar

essayez d'obtenir le position:relative;en #container, ajoutez la largeur exacte à #container

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width:600px;
    height: auto;
    margin:auto;
    padding: 10px;
}

travailler demo

2
jhunlio

Voici un nouveau moyen de centrer facilement votre div en utilisant l'affichage flex.

Voir ce violon qui marche: https://jsfiddle.net/5u0y5qL2/

Voici le css:

.layout-row{
box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.layout-align-center-center{
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
      -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
2
Yann Thibodeau

J'ai utilisé la méthode suivante dans quelques projets

https://jsfiddle.net/u3Ln0hm4/

.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

.cellcentercontent{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
2
Chandru

C'est parce que votre largeur est définie sur auto. Vous devez spécifier la largeur pour qu'elle soit visiblement centrée. Votre #container couvre toute la largeur du #main_content. Voilà pourquoi cela ne semble pas centré,

1
Bogdan Rybak

Cela fonctionnera bien, mais vous devrez peut-être réinitialiser "top: 200px;" selon votre besoin

#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
border:2px solid #cccccc;
}

#container {
width: 100px;
height: 20px;;
margin: 0 auto;
padding-top: 10px;
position: relative;
top:200px;
border:2px solid #cccccc;
}
1
Praveen Dabral
.parent {
width:500px;
height:200px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
}
#kid {
width:70%; /* 70% of the parent*/
margin:auto;
border:2px solid #f00;
height: 70%;
}

Cela résout très bien le problème (testé dans tous les nouveaux navigateurs), où le div parent a class = "parent" et le div enfant a id = "kid"

Ce style se centre horizontalement et verticalement. Le centre vertical ne peut être utilisé qu'avec des astuces complexes - ou en faisant en sorte que la division parent fonctionne comme une cellule de tableau, qui est l'un des seuls éléments HTML à prendre en charge correctement l'alignement vertical. Il suffit de définir la hauteur de l’enfant, l’auto-marge et l’alignement vertical du milieu pour que cela fonctionne. C'est la solution la plus simple que je connaisse.

1
Joseph Myers

utilisez margin:0 auto; à la div de l'enfant. Ensuite, vous pouvez centrer la division enfant dans la division parent.

1
Sandeep Pattanaik

Si vous définissez width: auto sur un élément de bloc, la largeur serait de 100%. Donc, la valeur auto ici n’a vraiment aucun sens. Vraiment la même chose pour la hauteur, car par défaut tout élément est défini sur une hauteur automatique.

Donc, finalement, votre div#container est réellement centré mais il occupe simplement toute la largeur de son élément parent. Vous faites le centrage correctement, il vous suffit de changer la largeur (si nécessaire) pour voir qu’elle est vraiment centrée. Si vous voulez centrer votre contenu principal, appliquez simplement margin: 0 auto; dessus.

1
pzin

Faites le css de cette façon ...

#main_content {
    top: 160px;
    left: 160px;
    width: auto;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
 }

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
}

Exemple de travail ici -> http://jsfiddle.net/golchha21/mjT7t/

1
golchha21

tout le monde l'a dit mais je suppose que ça ne me fera pas de mal de le répéter. vous devez définir la valeur width à une valeur. voici quelque chose de plus simple à comprendre.

http://jsfiddle.net/XUxEC/

1
btevfik

Sans définir Width, il obtiendra la largeur maximale possible. Donc, vous ne pouvez pas voir que Div est centré. 

#container 
{
  width: 50%;
  height: auto;
  margin: auto;
  padding: 10px;
  position: relative;
  background-color:black;  /* Just to see the different*/
}
1
New Developer

essayez celui-ci si c'est la sortie que vous voulez:

<div id="main_content" >
<div id="container">
</div>
</div>

#main_content {
background-color: #2185C5;
margin: 0 auto;
}

#container {
width: 100px;
height: auto;
margin: 0 auto;
padding: 10px;
background: red;
}
1
nexus_07

Vous devez attribuer une largeur à la div que vous souhaitez centrer.

Comme ça:

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

Plus d'informations et d'exemples sur ces liens:

http://www.w3schools.com/css/css_align.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

1
AndreaRivadossi

si vous ne voulez pas définir de largeur pour #container, ajoutez simplement

text-align: center;

to #main_content 

1
LRA
* {
  box-sizing: border-box;
}
#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 10px;
    position: absolute;
    border: 5px solid yellow;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
0
Yarbrough lu

faire un div au centre. pas besoin d'attribuer la largeur de la div.

démo de travail ici .. 

http://jsfiddle.net/6yukdmwq/

.container{width:100%; height:500px;display:table;border:1px solid red;text-align:center;}
.center{display:table-cell;vertical-align:middle;}
.content{display:inline-block;text-align:center; border:1px solid green;}



<section class="container">
    <div class="center">
        <div class="content">
            <h1>Helllo Center Text</h1>
        </div>
    </div>
</section>
0
Tauphik Ahamad