CSS: centrer un élément à l'intérieur d'un <div> élément

Question

Pour centrer un élément HTML, je peux utiliser le CSS astuce left: 50%;. Cependant, cette centres de l'élément par rapport à l'ensemble de la fenêtre.

Maintenant, j'ai un élément qui est un enfant d'un <DIV> élément et je wan pas au centre de l'enfant à l'égard de la mère <DIV>, et non pas la totalité de la fenêtre.

Comment puis-je le faire?

EDIT: je ne veux pas le conteneur <DIV> d'avoir tout le contenu centré, juste un seul axés sur l'enfant.

Answer 1

Set text-align:center; à la div parent, et margin:auto; pour l'enfant div.

JsFiddle Démo

HTML

<div id="parent">
    <div id="child1" class="block center">a block to align center and with text aligned left</div>
    <div id="child2" class="block left">a block to align left and with text aligned left</div>
    <div id="child3" class="block right">a block to align right and with text aligned left</div>
</div>

CSS

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

Answer 2

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

Cela devrait centre de la div

Answer 3

text-align:center; sur le div parent Devrait faire l'affaire

Answer 4

Est le div de largeur fixe ou fluide largeur? De toute façon, pour le fluide de la largeur, vous pouvez utiliser:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

Ou vous pouvez définir la div parent d' text-align:center; et l'enfant div text-align:left;.

Et left:50%; seulement des centres en fonction de l'ensemble de la page lorsque le div est définie à l' position:absolute;. Si yous ensemble de la div pour left:50%; il devra le faire par rapport à la div parent de largeur. Pour une largeur fixe, faites ceci:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

Answer 5

juste donner le div parent position: relative