如何以绝对位置居中儿童

Question

I have two div's inside another div, and I want to center child div.So,Please How can I do this?

#father {
   position: relative;
}

#son1 {
   position: absolute;
   width:285px;
}

#son2 {
   position: absolute;
   width:285px;
}

Answer 1

First, you set a 50% left to the child element. Now the left side of the child element is at the middle of it's parent element. So, in order to bring the child's element center at it's parent center, set a negative left margin of it's half width (285 / 2 = 142.5). Sorry for my english!

#son1, #son2 {
    position: absolute;
    left: 50%;
    margin-left: -142.5px;
}

EDIT

In order to center the child elements inside their parent element, and have the child elements next to each other check this:

 #father { width: 100%; height: 200px; position: relative; padding-top: 50px; background-color: #ccc; } #child-wrapper { width: 580px; position: absolute; left: 50%; margin-left: -290px; } #child-wrapper > div:first-child { margin-right: 10px; } #child-wrapper > div { background: #f1f1f1; } #son1, #son2 { width: 285px; padding: 20px 0; float: left; text-align: center; }

 <div id="father"> <div id="child-wrapper"> <div id="son1">Son1</div> <div id="son2">Son2</div> </div> </div>

Answer 2

#son1, #son2 
{
position: absolute;
left: 50%;
margin-left: -50%;
}

Answer 3

Yes you can you have to set top and left with margin-top and margin-left

You can check code here

 #father { position: relative; background: green; height:150px; width:300px; } #son1 { position: absolute; width:100px; margin-left:-50px; /* -half of width */ height:50px; background: yellow; left:50%; top:50%; margin-top:-25px; /* -half of height*/ } #son2 { position: absolute; width:50px; margin-left:-25px; /* -half of width */ height:30px; background: red; left:50%; top:50%; margin-top:-15px; /* -half of height*/ }

 <div id="father"> <div id="son1"></div> <div id="son2"></div> </div>