将一个div弹出框居中显示在屏幕中央

Question

我已经搜索了很多关于居中一个div元素的方法，无论是水平还是垂直居中，这是所有地方都提供的方法：

div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}

我刚找到了一种新的方法来居中一个 `div`，无论是水平还是垂直方向，只需把它包含在表格中即可。我已经在ie7及以上版本以及其他浏览器上进行了测试。

这里有一个示例：http://jsbin.com/ocenok/2/ 我想知道第一种方法在互联网、SO等处随处可见，并且需要预先知道宽度和高度，或者通常通过 Javascript 计算。而表格方法似乎毫无瑕疵，既不需要 javascript 也不需要固定高度/宽度。

那么表格方法有什么缺点吗？（我不知道要居中的 div 的高度/宽度。）

---

更新（为了让我的问题更清楚）：

我个人非常讨厌使用表格来布局非表格/布局数据。

1.我知道可以使用 Javascript 轻松实现我想要的效果。

2.我想通过使用 `display:table` 来实现，但这会削弱对IE7的支持。

但我想要理解的是，当我可以使用单个 `` 元素来实现这一点时，如果有的话，有什么缺点。

---

  <table>
    <tr>
        <td>
            <div>This is div that needs to be centered.</div>
        </td>
    </tr>
</table>

table {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
}

table td {
    width : 100%;
    text-align: center;
}

div {
    width:100px;
    height:100px;
    background:pink;
  margin: 0 auto;
}

在这里检查答案和类似问题的答案时，没有人推荐这种方法，即使它使用了所有有效的 HTML 元素、语法和规则。如果每个人都推荐使用 JavaScript 来处理演示文稿，即使可以轻松使用 CSS 实现，那肯定有一些缺点。 代码：然后应用以下CSS。

- Aaditi Sharma

---

然后他在表格中放了一个div...这样你就可以在容器内部拥有另一个容器，对吧？你知道，你发布的CSS被用来让你不再像旧时代一样使用表格。 - DanMan

你也可以使用嵌套的div并使用display：table，display：table-row，display：table-cell....但是社区是否过于迷恋不使用<table>标记，而在CSS中使用display：table？我真的不知道...你来评判吧... - Adam Jenkins

这是一个有趣的问题，我试图避免使用表格，但并不是因为它在样式或甚至思想上“不好”，而只是因为它增加了另一层复杂性。当然，如果它们用得恰到好处，我总是欢迎使用它们来进行设计。好吧，也许下一辈子我会为此付出代价;) - dmi3y

Fancybox做得非常好。 - Anagio

好的，祝你节日快乐！ - Dawson

Answer 1

请查看下面的函数并根据您的需求进行更改

function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  console.log("The calculated position is:");
  console.log(top,left);
  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
  console.log('A jQuery selection:');
  console.log($('#lightbox'));
}

更新的HTML和CSS答案：

HTML：

<div id="outer"><div id="inner"></div></div>

CSS（层叠样式表）：

#outer {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
    background:red;
}

#inner {
  width: 300px;
  height: 200px;
  margin-left: -150px;  /***  width / 2   ***/
  position: absolute;
  top: -100px;          /***  height / 2   ***/
  left: 50%;
    background:#ccc;
}

使用jQuery进行了更多更新，并且在调整窗口大小时始终保持居中：http://jsfiddle.net/3aZZW/3/

演示：http://jsfiddle.net/3aZZW/3/embedded/result/

- w3uiguru

---

我知道使用JavaScript是可能的，我需要知道的是我的方法有哪些缺点。 - Aaditi Sharma

您可以使用JavaScript/jQuery轻松实现此功能，并且不需要编写太多HTML标记和不必要的DOM元素，尤其是针对具有比其他HTML元素更多元素的表格。 - w3uiguru

但是根据我在整个SO上阅读的内容，如果某件事可以通过“HTML + CSS”实现，就没有必要使用“Javascript”，特别是在这种情况下还包括整个“jQuery”库。 - Aaditi Sharma

@AaditiSharma 你想要类似这样的旗帜弹出框吗？如果是的话，那么你很可能需要使用JavaScript。 - NullPoiиteя

@HappySingh：我给你一个+1的赞，感谢你所付出的所有努力。但是，由于我在问题中提到，我不知道要居中的div的height/width，因此无法使用margin-left值来填充，除非使用Javascript。但是通过表格可以解决这个问题。正如在其他回答中所述，没有人喜欢我使用的方法。是否有一个很好的理由说明为什么它是错误的？ - Aaditi Sharma

@NullPointer：我并不反对使用Javascript。但是如果某些东西可以通过CSS轻松实现，为什么要混合Javascript代码来进行展示呢？ - Aaditi Sharma

Answer 2

根据StatCounter，截至2012年11月，IE7仅占桌面浏览器使用份额的0.87％。不清楚该测量值有多精确；某些国家可能存在不成比例的加权，样本集几乎肯定无法完全匹配您的用户人口统计数据。但是，放弃IE7会失去多少？最好使用display：table; 另一方面，display：table;令我感到疯狂。这是我能找到的可行替代方案：

<div id="pg-centerer">
    <div id="shifter">
        <div id="item">content</div>
    </div>
</div>

CSS

#pg-centerer {
    position: absolute;
    left: 50%;
    top: 50%;
}

#shifter {
    position: relative;
    height: 40px;           /** Must set the height here. **/
    left: -50%;
}

#item {
    position: relative;
    top: -50%;
}

到目前为止，我还没想出如何避免设置

元素的height属性。这里有一个演示。我在Mac 10.8.1上测试了FF 18、Safari 6.0、Chrome 25.0.1362.0 canary和iOS Safari 6.0.1。

- tiffon

Answer 3

表格只应用于表格数据，而不应用于布局目的。

使用表格解决您的问题为您提供了一个快速简单的解决方案，但这并不意味着它是最好或正确的方法。

仅因为某些事情需要更多思考和努力，并不意味着应该避免使用它。

使用表格来解决问题可能会让您付出沉重的心理代价，会影响您的灵魂，所以请谨慎使用 :p

- Billy Moat

Answer 4

有不同的原因，为什么你不应该使用表格，其中一些已经在这里讨论过。我知道你只使用了一行，并希望保持承诺不添加任何行，但如果你违反了承诺，下面的一些原因将显示更多的重要性，例如渲染速度和屏幕阅读器问题。这正是为什么他们称某些东西为标准，而有些则不是。标准考虑到每件事情和每种情况。

渲染速度问题：

表格最大的缺点之一是它们被浏览器呈现的方式。必须先加载表格内部，然后才能确切地确定表格的位置和大小。如果表格中有很多信息，这可能会导致问题。

有效性和标准：

对于非表格数据使用表格意味着您正在编写无效的X / HTML。这对一些人来说可能没关系。但我不建议。请参见此处

搜索引擎优化：

在研究使用表格的其他不太常见的问题之前，我不知道这一点。

搜索引擎喜欢有效的代码，因此不使用表格有助于搜索引擎优化（SEO）。

请参见此处了解更多信息

屏幕阅读器和盲文显示器的问题：

表格在屏幕阅读器中不能轻松使用。请查看这篇文章。

如果必须使用表格进行布局，请记住，屏幕阅读器和盲文显示器会按行逐个读取表格的列。制表符顺序也以这种方式通过表格。因此，请确保从左到右逐行阅读时，您的表格结构是有意义的。

积极方面：

我不得不承认，如果你诚实地只使用一个具有一行和一列的表格，并且里面的数据非常少（我称之为限制），那么该页面可能比你使用JavaScript的时间更快地呈现，但其他问题仍然存在。

---

- Auxiliary

Answer 5

只要表格中没有太多数据，就不会有太大的问题。 但是，对于浏览器来说，表格有点重，并且随着越来越多的数据进入其中，它们会使您的网页响应速度变慢。

您展示的示例仅用于举例说明，在现实世界中，您将在其中放置数据。 如果数据将很大，请尝试选择不同的方法。也许可以使用不久将在所有现代浏览器中支持的flexbox模型或box模型。 在这里查看示例。 http://www.kirupa.com/html5/centering_vertically_horizontally.htm

如果内部数据很小，则可以随意使用您的方法。

- Praveen Puglia

Answer 6

直接对内心中不关心标准或多通道内容服务的极客说话...实际上，我只能想到一个表格的技术问题，如果单元格内有大量内容，浏览器将等待所有内容加载完毕才能计算单元格的宽度和高度，然后再进行渲染...所以，如果该内容非常大并且包含大型图像，则不会逐步呈现...而将其制作为固定表格，则上述技巧将无法奏效。

- Ayyash

Answer 7

这取决于你想要实现什么目标。如果只是一个页面上有一件事情居中，那么它很棒。

但我看到你已经将表格位置设置为固定。这意味着它会随着你的滚动而滚动，并覆盖下面的内容。另一件事是，如果该表格真的填满了，由于位置被设置为固定，您将无法看到该表格底部的内容。

这是一个很好的解决方案，用于居中小段文本、图像或信息。

但在包含大量其他内容或表格内有大量内容的页面中使用它是不好的。

---

附注：使用JavaScript来实现像这样简单的东西是愚蠢的。可以仅使用CSS完成它。如果您使用JavaScript居中某些内容，而没有JavaScript的客户端访问该网站呢？让我们不要通过在所有简单的事情上使用JavaScript / jQuery来破坏网络 ;)

- Gilly

Answer 8

http://phrogz.net/css/WhyTablesAreBadForLayout.html

基本上，它会稍微延长加载时间（JavaScript 较慢），对于屏幕阅读器不友好（使用 JAWS 等工具测试），并且难以重新设计（只有在你忘记为什么要放置表格时才会变得困难，所以一定要留下注释 :)。真正美妙的事情是（我在和你说话，W3C！）像 box-align: x y; 这样的东西。然后你也可以做一些像 align: center center 或者 align: center bottom; 的事情。

- Ian