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

advertisements

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.


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>