Question

有没有办法将div置于体内，居中，给定的左右边距等于x和上下边距，等于y？除了div（及其子代）之外，文档中没有任何内容。

更新。我想要以下内容：

enter image description here

另外，我很高兴有一个更常见的解决方案，当x1！= x2，y1！= y2时（虽然我的特殊情况解决方案x1 == x2，y1 == y2）

Answer 1

更好的解决方案（？）：将div的margin-left和margin-right设置为“auto”

Answer 2

没有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;
}

您可以在此处查看：http://jsfiddle.net/CatChen/VGpdv/4/

更新：如果CSS3实施可以接受，那就容易多了：

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

Answer 3

您可以使用固定定位。但它在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>

查看实际操作：http://obda.net/stackoverflow/position-fixed.html

Answer 4

如果您希望所有浏览器中的边距相同，则必须使用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>

HTML5 <div>位于</div>内

4 个答案: