将 div 弹出窗口居中在屏幕中心答案

【问题标题】：Centering a div popup in the center of screen将 div 弹出窗口居中在屏幕中心
【发布时间】：2012-12-09 03:34:22
【问题描述】：

我已经搜索了很多以水平和垂直居中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 的高度/宽度。）

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

我自己讨厌将表格用于非表格/布局数据。

我知道使用 Javascript 可以轻松实现我想要的。
我想我可以使用display:table 来实现这一点，从而取消对 IE7 的支持。

但我想了解的是，当我可以使用单个 <table> 元素实现这一点时，如果有的话，缺点是什么。

在此处和类似问题上查看答案，没有人推荐这种方法，即使它使用所有有效的 HTML 元素以及语法和规则。

如果大家都推荐使用javascript来处理presentation，虽然CSS很容易实现，但它一定有一些缺点。

代码：

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

然后应用下面的 CSS

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

【问题讨论】：

@Forty-Two 1 table > 1 tr > 1 td 帮助我完成工作，而不是使用 javascript。
然后他在他的桌子上放了一个 div……这样你就可以在你的容器里放一个容器，对吧？您知道，您发布的 CSS 正在被使用，因此您不必像过去那样使用表格。
@DanMan ：您是在建议我应该使用 Javascript 来实现使用 CSS 本身可能的东西？
你也可以使用嵌套的 div 并使用 display: table, display: table-row, display: table-cell....但是社区不使用标签，还说显示：CSS 中的表格？我真的不知道......你是法官......

仅查看我的更新答案 HTML 和 CSS。

标签： html css center

【解决方案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/

【讨论】：

我知道使用 JavaScript 是可能的，我需要知道我的方法有什么缺点。
您可以根据您的需要使用该表，但使用 javscript/jquery 您可以轻松且完整地实现这一点，而无需编写过多的 html 标签和不必要的 DOM 元素，并且成为具有更多元素的表任何其他 html 元素。
但是从我一直在阅读的所有内容来看，如果HTML + CSS 有可能，那么不必要地使用Javascript 是不好的，在这种特殊情况下，整个jQuery 图书馆。
@AaditiSharma 所以你想要这样的标志弹出窗口......？如果 .. 是的，比你更需要 JavaScript
@HappySingh ：感谢您所付出的所有努力，我要 +1。但不能接受答案，正如我在问题中提到的那样。我确实不知道我想要居中的 div 的 height/width。所以我不能填充margin-left 值，而不使用Javascript。但是有了解决问题的表。与SO 上的其他答案一样，没有人喜欢我使用的方法。 为什么这是错误的有充分的理由吗？

【解决方案2】：

您不应使用表格有多种原因。有些已经在这里讨论过了。我知道您只使用了一行，希望您能信守不添加任何行的承诺，但如果您违背了这一承诺，下面的一些原因将显示出更重要的意义，例如渲染速度和屏幕阅读器问题。这就是正是为什么他们称某些东西为标准而有些则不是。标准会考虑所有情况和情况。

渲染速度问题：

表格的最大缺点之一是浏览器呈现它们的方式。必须先装入桌子内部，才能准确确定桌子的位置和大小。如果您要在表中包含大量信息，这可能会导致问题。

有效性和标准：

对非表格数据使用表格意味着您正在编写无效的 X/HTML。这对某些人来说可能很好。但我不推荐。见here

搜索引擎优化：

在搜索其他一些关于使用表格的鲜为人知的问题之前，我并不知道这一点。

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

有关更多信息，请参阅here

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

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

如果您必须使用表格进行布局，请记住屏幕阅读器和盲文在各列中逐行显示阅读表。选项卡 order 也以这种方式通过表。所以请确保您的从左到右阅读时，表格结构是有意义的，逐行。

在+侧：

我不想承认，如果你诚实地只使用一个包含一行一列且内部数据量非常少的表格（我称之为限制），那么页面将可能比您使用 Javascript 的时间更快，但其他问题仍然存在。

【讨论】：

【解决方案3】：

表格仅用于表格数据 - 不用于布局目的。

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

仅仅因为某件事需要更多的思考和努力并不意味着应该避免它。

为此使用表格是你的危险 - 你不朽的灵魂可能会在未来的某个日期为你今天的行为付出沉重的精神代价：p

【讨论】：

【解决方案4】：

根据StatCounter，截至2012年11月，IE7仅占桌面浏览器使用份额的0.87%。目前尚不清楚该测量的准确度。一些国家/地区可能是disproportionately weighted，而样本集几乎可以肯定与您的用户人口统计数据不完全匹配，无论它们是什么。但是，如果把 IE7 抛在后面，你真的会损失多少呢？还不如去display: table;

另一方面，display: table; 是必要的，这让我抓狂。这是我能找到的最接近可行的替代方案：

HTML

<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%;
}

到目前为止，我还没有想出如何避免设置div#shifter 元素的height。这是working demo。我已经在 Mac 10.8.1 FF 18、Safari 6.0、Chrome 25.0.1362.0 canary 和 iOS Safari 6.0.1 上对此进行了测试。

【讨论】：

【解决方案5】：

在表内有少量数据之前，问题不大。表格对于浏览器来说有些沉重，而且随着更多的数据进入，它们会使您的网页响应比较慢。

您展示的示例仅作为示例，但在现实世界中，您将在其中包含数据。如果它会很大，请尝试选择不同的方法。可能是很快将在所有现代浏览器中支持的flexbox model 或box model。在此处查看示例。 http://www.kirupa.com/html5/centering_vertically_horizontally.htm

如果里面的数据很小，请随意使用您的方法。

【讨论】：

【解决方案6】：

将我的话指向不关心标准或提供多渠道内容的内部极客......我能想到的表格确实只有一个技术问题，如果您在该单元格中有大量内容，则浏览器将等待所有内容加载才能在渲染之前计算单元格的宽度和高度......所以如果该内容真的很大并且有很大的图像，它不会逐渐渲染......并使其成为固定表，好吧，上面的技巧不起作用。

【讨论】：

【解决方案7】：

我取决于您要达到的目标。如果它只是以一件事为中心的一页，那就太好了。

但是我看到你已经设置了桌子位置：固定。这意味着它将与您一起滚动并位于下面的内容之上。另一件事是，如果该表真的满了，您将无法看到该表底部的内容，因为该位置已设置为固定。

这是将一小段文本、图像或信息居中的绝佳解决方案。

但是在一个有很多其他内容或表格中有很多内容的页面中使用它是一件坏事。

旁注：使用 javascript 来实现这样简单的事情是愚蠢的。它可以在没有 javascript 的情况下仅使用 CSS 来完成。如果您使用 javascript 来居中，而客户端没有 javascript 访问怎么办？让我们不要在所有简单的事情上使用 javascript/jquery 来破坏 web ;)

【讨论】：

【解决方案8】：

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

基本上，它的加载时间稍长（JavaScript 速度较慢），对屏幕阅读器不利（使用 JAWS 之类的工具进行测试），并且很难重新设计（如果您碰巧忘记了为什么要放一个桌子在那里，所以一定要给自己留下评论:)。真正好的东西（我在和你说话，W3C！）类似于box-align: x y;。然后你也可以做align: center center或align: center bottom;之类的事情。

【讨论】：