How to position a div with equal margins for left, right, and top

Question

I would like to achieve a layout that looks like this:

I am interested in a css/html only solution, so no javascript required.

The widths of both divs are dynamic, so I cannot use any static margins.

The spacing between the sides of the divs, and the top, should be the same.

I tried using margin: auto auto 0 auto on the inner div, as you can see in this jsfiddle, but it only works for left and right.

Answer 1

Note, the following attempt doesn't answer the question fully, since the width of the child cannot be dynamic.

The idea is to use a percentage width + percentage margin-top values on the child. It's a responsive layout, see the comments in the code, and try it out on different window sizes.

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>