HTML5
centered inside

Question

Is there a way to place a div inside body, centered, with given left-right margins equal to x and top-bottom margins, equal to y? Nothing except of the div (and its children) is presented in the document.

UPDATE. I want the following:

enter image description here

Also, I'd be glad to have a more common solution for the case, when x1 != x2, y1 != y2 (though a solution for my particular case x1==x2, y1==y2 is appreciated).

Volker Gaul · Accepted Answer

Better solution(?): Set margin-left and margin-right for the div to "auto"

igor · Answer

You can use fixed positioning. It won’t work in IE6, though.

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
    <head>
        <meta charset='utf-8' />
        <title>Test</title>
        <style>
            #bla {
                position: fixed;
                top: 30px;
                left: 60px;
                right: 60px;
                bottom: 30px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id='blah'>
        </div>
    </body>
</html>

See it in action: http://obda.net/stackoverflow/position-fixed.html

HTML5 <div> centered inside <body>

Tags:

html

noober

2 Answers

Volker Gaul

igor

Recent Activity

Donate For Us