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

Question

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

3

我希望将一个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;
        }

有没有办法实现跨浏览器呢？

- Morgan Cheng

2

啊，这是我生命中的痛！谁会想到人们永远不想垂直对齐元素呢？！ - Nick Bedford

2

你的键盘说“垂直”，但是你的眼睛却说“水平”。 - outis

6个回答

5

请参阅 Quirks模式和严格模式以及使用Doctype激活浏览器模式。基本上，通过在文档顶部始终使用DOCTYPE（如下所示），可以强制浏览器（特别是IE）更加符合标准：

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

使用margin: 0 auto可以使所有浏览器水平居中。

编辑：这个问题最初是关于垂直居中的，因此下面是答案：

来自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>

基本上，这涉及到相对位置、绝对位置和相对定位的复杂问题（而在表格单元内容中则很简单）。

- cletus

我本以为你会回答“使用表格”，Cletus！你是不是走向了黑暗面？ - alex

注意：那并不是有冒犯之意，希望不要被误解！祝周五愉快 :) - alex

当使用divs太困难、不可能或者不足以向后兼容时，我会使用表格。 - cletus

我之前使用过上面的示例来垂直居中 - 但总感觉使用这么多div很丑陋。我想我们得等到IE8完全取代IE6和7，这样我们才能使用display: table-cell和vertical-align: middle。 - alex

1

尽管他说的是垂直的，但我非常确定他的意思是水平的。 - Paolo Bergantino

1

IE真是个让人头疼的家伙。你可以使用过时的表格标记来实现它（令人不爽）。

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

我相信你也可以用 CSS hack 来实现它。

- lod3n

1

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

- trydyingtolive

"text-align:center" 不适用于诸如 "div" 等块级元素。 - Morgan Cheng

0

这对我来说是有效的，但它相当脆弱，因此请使用像素或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％。看起来效果不错。

- Anthony

0

... 这里 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>

- sanecin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paolo Bergantino · Accepted Answer

您可能没有在文档中包含 DOCTYPE，因此导致 IE 运行在怪异模式下。

例如，在文件顶部添加以下内容：

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

看看这里的区别：有 doctype，没有 doctype。

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

上面的 DOCTYPE 只是众多选择中的一个。欲了解更多信息，请查看此 stackoverflow 问题。

您还可以注意到 Stackoverflow 的设计师姊妹站点以此非常重要的 Web 设计方面命名：Doctype。