html – 如何为左,右和顶部定位具有相等边距的div

我想实现一个如下所示的布局：

我对css / html唯一解决方案感兴趣,所以不需要javascript.

两个div的宽度都是动态的,所以我不能使用任何静态边距.

div的侧面和顶部之间的间距应该相同.

我尝试在内部div上使用margin：auto auto 0 auto,正如你在这个jsfiddle中看到的那样,但它只适用于左右.

解决方法

注意,以下尝试不能完全回答问题,因为孩子的宽度不能是动态的.

我们的想法是在孩子身上使用百分比宽度百分比margin-top值.这是一个响应式布局,请参阅代码中的注释,并在不同的窗口大小上进行尝试.

JSfiddle：http://jsfiddle.net/jkoycs6e/

body {
    margin: 0;
}
.outer {
    height: 100vh; /*for demo only*/
    background: teal;
    overflow: auto;
}
.inner {
    width: 80%;
    background: gold;
    margin: auto;
    margin-top: 10%; /* 100%-80%/2 */
}

<div class="outer">
    <div class="inner">
        hello<br/>hello<br/>hello
    </div>
</div>