div2(relative) 在 div1(absolute)中无法使用百分比进行top与bottom调整

Question

原意是想让div2居中显示在浏览区窗口,但div2的top:-50%无法现实。
我认为原因是没有定义父级元素（div1）的高度，所以无法按百分比进行top与bottom调整。

想请教几个问题：
1、没有定义body的高度，但div1的left:50%;top:50%可以实现；
2、没有定义div1的宽度，但div2的left:-50%可以实现；
3、在div1高度不固定前提下，如何实现div2的top:-50%。

请不吝赐教，万分感谢！

HTML:

<div class="box1">
    <div  class="box2"></div>
</div>

CSS:

    .box1 {            
        position: absolute;
        left: 50%;
        top: 50%;
        border: solid red;
    }

    .box2 {
        height:200px;
        width:200px;
        position: relative;
        top: -50%;   /*无法实现*/
        left: -50%;  
        border: solid blue;
    }

Answer 1

因为外部的box1没有指定高度，所以内部box2的top无法进行百分比计算，给box1一个高度就好了。