Geek Answers Handbook

HTML5 <div> centered inside <body>

Is there a way to place the div inside the body, with the center, with the given left and right margins equal to x and the upper margins equal to y? Nothing but the div (and its children) is represented in the document.

UPDATE I want the following:

enter image description here

In addition, I would be happy to have a more general solution for the case when x1! = X2, y1! = Y2 (although the solution for my specific case x1 == x2, y1 == y2 is evaluated).

+4
source share
4 answers

You can use fixed positioning. However, it will not work in IE6.

<!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 in action: http://obda.net/stackoverflow/position-fixed.html

+4
source

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

+8
source

The best I can do without CSS3 is to use two divs.

 html { width: 100%; height: 100%; } body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } div.parent { display: inline-block; position: relative; left: 50%; top: 50%; } div.child { width: 100px; margin-left: -50%; margin-top: -50%; border: 1px solid #000; }

You can see it here: http://jsfiddle.net/CatChen/VGpdv/4/

Update: If the CSS3 implementation is acceptable, it is much simpler:

http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

+4
source

You will need to use javascript if you want the fields to be the same in all browsers.

 <body> <div id="the_div" style="margin: 20 auto;margin-bottom:0;width:300px;"> </div> <script type="text/javascript"> var dim = (function () { var _pW, _pH; if (document.body && document.body.offsetWidth) { _pW = document.body.offsetWidth; _pH = document.body.offsetHeight; } if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) { _pW = document.documentElement.offsetWidth; _pH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) { _pW = window.innerWidth; _pH = window.innerHeight; } return { width : _pW, height : _pH }; })(); var div = document.getElementById( "the_div" ); div.style.height = dim.height - 20 + "px"; </script> <body>
+3
source

More articles:


All Articles