Centrer dans un div

Question

Possible en double:
How to center a div in a div?

J'ai une grande DIV qui a une largeur et une hauteur de 100% donc il faut le navigateur entier. J'ai aussi une autre DIV à l'intérieur avec une largeur de 1024px et une hauteur de 400px. Je me demandais quelle serait la meilleure méthode pour centrer la div horizontalement et verticalement? Je veux également qu'il reste au centre lorsque le navigateur est redimensionné. Existe-t-il un plugin jQuery, un javascript pratique ou puis-je le faire simplement en utilisant CSS?

Le balisage

.bigdiv{ 
height:100%; 
width:100%; 
background-color:#eee; 
} 
.smalldiv{ 
height:400px; 
width:1024px; 
background-color:#ccc; 
} 

<div class="bigdiv"> 
<div class="smalldiv"></div> 
</div> 

Merci pour toute l'aide et des conseils!

Answer 1

Bon alors voici comment l'obtenir au centre.

.bigdiv{ 
height:100%; 
width:100%; 
background-color:#eee; 
position:relative; 
} 
.smalldiv{ 
height:400px; 
width:1024px; 
background-color:#ccc; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:512px; 
margin-top:200px; 
} 

<div class="bigdiv"> 
<div class="smalldiv"></div> 
</div> 

Answer 2

utilisation text-align:center dans votre plus grande div et margin:0 auto dans votre div intérieur

Answer 3

essayez d'utiliser, margin:0 auto;

.smalldiv{ 
height:400px; 
width:1024px; 
background-color:#ccc; 
margin:0 auto; 
} 

Answer 4

Vous pouvez facilement donner le margin:auto; à votre enfant div pour vos résultats souhaités

HTML

<div class="bigdiv"> 
<div class="smalldiv"></div> 
</div> 

CSS

.bigdiv{ 
    height:100%; 
    width:100%; 
    background-color:#eee; 
    } 
    .smalldiv{ 
    height:400px; 
    width:1024px; 
    background-color:#ccc; 
    margin:auto; 
    } 

DEMO