有共同的父

Question

垂直居中的孩子我有幾個孩子http://jsfiddle.net/thiswolf/FUqSP/父DIV和我想的是含child.For實例中垂直居中子內的每個格我想中心child_two在child_one。我有這個CSS

.parent{ 
width:300px; 
height:300px; 
background-color:orange; 
display:table-cell; 
vertical-align:middle; 
} 
.child_one{ 
width:100px; 
height:100px; 
background-color:purple; 
margin-left:auto; 
margin-right:auto; 
} 
.child_two{ 
width:50px; 
height:50px; 
background-color:pink; 
margin-left:auto; 
margin-right:auto; 
} 
.child_three{ 
width:25px; 
height:25px; 
background-color:yellow; 
margin-left:auto; 
margin-right:auto; 
} 
.child_four{ 
width:12px; 
height:12px; 
background-color:red; 
margin-left:auto; 
margin-right:auto; 
} 

，這是HTML

<div class="parent"> 
<div class="child_one"> 
<div class="child_two"> 
<div class="child_three"> 
<div class="child_four"> 
</div> 
</div> 
</div> 
</div> 
</div> 

Answer 1

入住這link

我以前float:left;去實現它。

檢查這個fiddle

我已經使用百分比來完成。
對於其他方法來實現這個檢查link

我建議你用百分比來做到這一點。這不會讓你感到困惑。

Answer 2

你可以使用孩子的絕對定位。你必須將每個孩子放在最高50％，剩下50％，並給他們一個寬度和高度的一半的負頂部和左邊界。

.parent{ 
    width:300px; 
    height:300px; 
    background-color:orange; 
    position: relative; 
} 
.child_one{ 
    width:100px; 
    height:100px; 
    background-color:purple; 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -50px; 
    margin-top: -50px; 
} 

這只是第一個孩子。你必須對每個孩子都這樣做。所以如果寬度是50px，請使用-25px的邊距。

http://jsfiddle.net/APdaP/

Answer 3

添加這對每個孩子

的位置是：相對的;
top：25％;

這裏完整的CSS，

.parent{ 
width:300px; 
height:300px; 
background-color:orange; 
display:table-cell; 

} 
.child_one{ 
width:100px; 
height:100px; 
background-color:purple; 
margin-left:auto; 
margin-right:auto; 
position: relative; 
top: 25%; 
} 
.child_two{ 
width:50px; 
height:50px; 
background-color:pink; 
margin-left:auto; 
margin-right:auto; 
position: relative; 
top: 25%; 
} 
.child_three{ 
width:25px; 
height:25px; 
background-color:yellow; 
margin-left:auto; 
margin-right:auto; 
position: relative; 
top: 25%; 
} 
.child_four{ 
width:12px; 
height:12px; 
background-color:red; 
margin-left:auto; 
margin-right:auto; 
position: relative; 
top: 25%; 
} 

這裏的DEMO：fiddle

Answer 4

據我送你在我以前的評論的鏈接，你應該試着叫了解決方案：

的CSS表法。

它會顯示您的divs作爲表格單元格，以便您可以使用vertical-align爲您的子divs。