Question

我想在另一个div的中心水平放置一个div。

    <div id="container">
        <div id="centered">
            hello world;
        </div>
    </div

我使用“margin：0px auto”技巧尝试使用以下样式，但它仅适用于FF，而不适用于IE。

    div
    {
        border-width: 2px;
        border-style: solid;
    }
    #centered
    {
        margin: 0 auto;
        width: 30px;
    }
    #container
    {
        width: 100px;
        }

有没有办法实现这种跨浏览器？

Answer 1

您可能没有在文档中包含DOCTYPE，因此将IE推入怪癖模式。

在文件顶部添加此项，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在此处查看差异：with doctype，without doctype。

始终在文档中包含DOCTYPE以使您的网站在浏览器中尽可能保持一致是一种非常好的做法。使用DOCTYPE和重置样式表，跨浏览器布局更加可靠。

上述DOCTYPE只是众多选择中的一种。有关更多信息，请查看this stackoverflow question

您可能还注意到，Stackoverflow针对设计师的姊妹网站以网页设计的这一非常重要的方面命名：Doctype。

Answer 2

请参阅Quirks mode and strict mode和Activating Browser Modes with Doctype。基本上，最好使用文档顶部的DOCTYPE强制浏览器（特别是IE）更符合标准，始终，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

所有浏览器都会以margin: 0 auto为中心。

编辑：这个问题最初是说“垂直居中，因此答案如下：

来自Vertical Centering in CSS：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

基本上，它涉及相对+绝对+相对定位（而其表格单元格内容很简单）很复杂。

Answer 3

IE是PITA。您可以使用不推荐使用的表格标记（cringe）。

<table width="100%" height="100%"><tr><td align="center" valign="middle">
CONTENT
</td></tr></td>

我相信你也可以通过CSS黑客攻击它。

Answer 4

添加text-align：center;到容器。旁注：居中div中的文本也将居中。

Answer 5

这适合我，但它相当脆弱，所以使用像素或ems，而不是百分比：

<style type="text/css">

#div1 {
    height: 20em;
    width: 30em;
    border: 1px dashed #000;
    text-align:center;
}

#div2 {
    height: 5em;
    width: 5em;
    border: 1px solid #000;
    margin: auto;
    margin-top: 25%;
    margin-bottom: -25%;
    line-height: 5em;
}
</style>

<div id="div1">
    <div id="div2">Woot!</div>
</div>

我只是将上边距设置为25％，将底部设置为-25％。似乎工作得很好。

Answer 6

...这里div class =“content”在div位置的中心：relative ...

<style>

 .wrapper {
     width:200px;/* this is size range */
      height:100px;  
 position:absolute;
 left:50%;top:50%;
 visibility:hidden;
}

.content {
 position:relative;
 width: 100%;height:100%;
 left:-50%;top:-50%;
 visibility:visible;
}

</style>

<div style="position:relative;width:500px;height:400px;background:#ff00ff;">

  <div class="wrapper">
   <div class="content">

   ... so you has div  on center ...

   </div>
  </div>

</div>

如何将div放在另一个div的中心？

6 个答案: