Html HTML5 <div> 居中于 <body>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6825464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 <div> centered inside <body>
提问by noober
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.
有没有办法在 body 内部放置一个 div，居中，给定的左右边距等于 x，上下边距等于 y？除了 div（及其子项）之外，文档中没有任何内容。
UPDATE. I want the following:
更新。我想要以下内容：
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).
另外，当 x1 != x2, y1 != y2 时，我很高兴为这种情况提供更常见的解决方案（尽管对我的特定情况 x1==x2, y1==y2 的解决方案表示赞赏）。
采纳答案by igor
You can use fixed positioning. It won't work in IE6, though.
您可以使用固定定位。但是，它在 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 it in action: http://obda.net/stackoverflow/position-fixed.html
回答by Volker Gaul
Better solution(?): Set margin-left and margin-right for the div to "auto"
更好的解决方案（？）：将 div 的 margin-left 和 margin-right 设置为“自动”
回答by Cat Chen
The best I can do without CSS3 is to use two divs.
如果没有 CSS3，我能做的最好的事情就是使用两个 div。
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/
你可以在这里看到它：http: //jsfiddle.net/CatChen/VGpdv/4/
Update:If CSS3 implementation is acceptable, it's a lot easier:
更新：如果 CSS3 实现是可以接受的，那就容易多了：
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
回答by zellio
You will have to use javascript if you want the margins to be the same in all browzers.
如果您希望所有浏览器中的边距都相同，则必须使用 javascript。
<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>
