CSS - Comment puis-je centrer un div dans un div?

Question

J'ai un div externe qui est 800px de large. J'ai un div interne qui pourrait être de 200 à 600 px de large.

Je sais comment centrer le div intérieur dans l'externe si je mets une intérieure pour avoir une largeur spécifique, mais comment puis-je centrer depuis sa largeur variable?

est-il un moyen de régler la div être que la largeur des éléments à l'intérieur de celui-ci, plutôt que de l'avoir à remplir son expansion contenant div?

Answer 1

flottante, display: inline-block, ou le positionnement absolu se rétrécira-envelopper un div. Parmi ceux-ci, display: inline-block serait le plus facile à centrer avec un simple texte-align: center. Si vous devez soutenir les navigateurs de merde (je suis sûr que vous faites), check this out.

En supposant que vous ne soutenez pas FF2 encore, vous pouvez réellement faire disparaître la plupart des hacks, et le soutien encore plus IE en faisant de la div intérieure une période à la place. display: inline-block fonctionne sur IE plus ancien tant que l'élément était à l'origine un élément en ligne.

Answer 2

Vous pouvez définir dynamiquement X et Y coordonnées du innerDIV, chaque fois que vous voulez réaligner le innerDIV. EG:

innerDIV.style.left = (outerDIV.style.width-innerDIV.style.width)/2

innerDIV.style.top = (outerDIV.style.height-innerDIV.style.height)/2

où innerDIV est le style est défini sur position:relative

Answer 3

Vous pouvez faire trois classes CSS avec la marge appropriée pour taht div willl être dans le centre & appliquer ces classes sur la base de la largeur de div intérieure.

Answer 4

Tableau haine fait fureur ces jours-ci, mais je trouve que l'utilisation d'une table avec des cellules fixées à des largeurs de pourcentage résout ce problème proprement (et navigateur croix):

<table> 
    <tr> 
    <td width="50%"></td> 
    <td>centered content</td> 
    <td width="50%"></td> 
    </tr> 
</table> 

Answer 5

Vous devrez définir un largeur sur la div intérieure, sinon il va implicitement de prendre toute la largeur de la div extérieure. Si vous voulez dire "largeur dynamique" comme dans "flotté", il sera vraiment difficile de le centrer.

Donc, en supposant que vous définir une largeur sur la div, il suffit d'ajouter ce style:

.centeredDiv { 
    width: 400px; 
    margin: 0 auto; // auto left/right margin will center it 
}