need help CSS centering with absolute positioning

css, css-position, html

Solution

Is this what you are looking for ?

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

Problem

I've never been totally satisfied with my various solutions to centering content in a web page. the `<center>` tag has been deprecated back in the middle of the 18th century, but I fail to see a reasonable alternative. Specifically what I want is to have a parent DIV that is centered, but against whose upper left hand corner I can set things "absolutely". Is there a way to accomplish this without using window.onresize javascript that remeasures everything? It seems like a fairly straight forward idea... I want things absolutely positioned, I just want the 0,0 coordinate to be relative to something other than the top left corner of the browser window. Right now, what I do is set a div to center its content and then noodle around with relative positioning, but that's very tiresome because relative objects keep pushing each other around in ways that I totally don't want. Any and all thoughts on this greatly appreciated.

Original source