保持div比例和位置

Question

这可能很简单，但我很难做到这一点。

我希望能够在调整大小时保持多个中心对齐的DIV的比例和位置。就像流畅的布局一样。

这是一个例子jsFiddle：https://jsfiddle.net/qp6pubtv/。我想在一个流动的环境中保持这种状态。

HTML：

<div>
    <div class="outouter">
        <div class="outer">
            <div class="middleA"></div>
            <div class="middleB"></div>
            <div class="middleC"></div>
        </div>
    </div>
</div>

的CSS：

.outouter{
    background-color: GreenYellow;
    width:300px;
    height: 250px;
    position: absolute;
}
.outer{
    background-color: DarkSeaGreen;
    width:90%;
    height: 90%;
    position: relative;    
    margin: 0 auto;
}
.middleA{
    background-color: CadetBlue;
    width:80%;
    height: 80%;
    position: absolute;  
    margin: 0 auto;
}
.middleB{
    background-color: DarkGoldenRod;
    width:70%;
    height: 70%;
    position: absolute;    
    margin: 0 auto;
}
.middleC{
    background-color: DarkOrchid;
    width:60%;
    height: 60%;
    position: absolute;    
    margin: 0 auto;
}

Answer 1

你需要设置包装器div宽度的宽度，以％为单位，或者将它设置为main，对于每一步，内部需要设置尺寸相对外部的％。调整大小时会改变宽度。

Answer 2

您可以将left和right属性添加到每个内部块中，即

.middleA{
    background-color: CadetBlue;
    width:80%;
    height: 80%;
    position: absolute;
    left: 0; /*this*/
    right: 0; /*this*/
    margin: 0 auto;
}

http://jsfiddle.net/qp6pubtv/1/（我也将父亲的宽度和高度设为100％）