Question

我有一个有几个孩子{％3}的父div，我希望将每个div垂直居中于包含child的孩子内。例如我想将 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

在每个孩子身上添加

职位：亲属;
顶部：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 2

选中此link

我用float:left;来实现它。

检查此fiddle

我用百分比做了。
有关其他方法，请检查此link

我建议你用百分比来做这件事。这不会让你感到困惑。

Answer 3

您可以使用孩子的绝对定位。您必须将每个孩子定位在最高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 4

根据我在之前的评论中发送给您的链接，您应该尝试使用以下解决方案：

Css表方法。

它会将您的div显示为表格单元格，以便您可以将vertical-align用于您的子级div。

让孩子与父母共同居中

4 个答案: