Question

css垂直居中，从body开始采用百分比display: table-cell; vertical-align: middle;后

#one{
position: relative;
width: 60%;
height: 100%;
margin: 0 auto;
background-color: #000;
}
#two
{
position:relative;
width: 80%;
height: 100%;
background-color: #333;
display:table-cell;
vertical-align: middle;
}
#three
{
width: 100%;
height: 30%;
background-color: #ccc;
}
1.#tow和#three不占空间，2.如果把#tow改成absolute能显示，但#three不能垂直居中，3.如果把百分比换成px，则能居中，但我想要的是百分比居中。请教各位，该如何解决这个问题

Answer 1

这是因为三个width加起来已经大于100%了
要三者之和小于等于100%才行

追问

三个是嵌套关系