html - 如何将 div 的左、右、上边距设置为相等

Question

我想实现如下所示的布局:

我对仅 css/html 的解决方案感兴趣，因此不需要 javascript。

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

div 两侧和顶部之间的间距应该相同。

我尝试在内部 div 上使用 margin: auto auto 0 auto，如您在此 jsfiddle 中所见, 但它只适用于左右。

Answer 1

请注意，以下尝试并未完全回答问题，因为子项的宽度 不能是动态的。

想法是在子元素上使用百分比 width + 百分比 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>