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/

我想知道第一种方法在互联网上随处可见，所以和需要预先知道宽度和高度，或者通常是通过Javascript计算的。

表格方法看起来完美无瑕，既不需要javascript，也不需要固定的高度/宽度。

表格方法是否存在任何缺点？

（我不知道我想要居中的div的高度/宽度。）

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

我自己讨厌使用表格表示非表格/布局数据。

我知道我想要的东西很容易用Javascript来实现。
我认为我可以使用display:table实现此目的，从而杀死IE7。

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

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

如果每个人都建议使用javascript来处理演示文稿，即使使用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;
}

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/

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

不应使用表格的原因不同。一些已经在这里讨论过的。我知道你只使用一行，你希望尽量保证不添加任何行，但如果你违背了这个承诺，下面的一些原因会显示更多的重要性，比如渲染速度和屏幕阅读器问题。那是完全为什么他们称之为标准而有些则不是。标准考虑了所有情况和所有情况。

渲染速度问题：

表的最大缺点之一是它们由浏览器呈现的方式。必须先加载表格内部，然后才能准确确定表格的位置和大小。如果您要在表格中获得大量信息，这可能会导致问题。

有效性和标准：

将表用于非表格数据意味着您正在编写无效的X / HTML。对某些人来说可能没什么问题。但我不建议。见here

SEO：

在我使用表格搜索其他一些较少听到的问题之前，我不知道这一点。

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

有关此内容的详情，请参阅here

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

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

如果必须使用表格进行布局，请记住屏幕阅读器和盲文在列中逐行显示读取表格。 TAB 订单也以这种方式通过表格。所以一定要确保你的表格结构从左到右阅读时有意义，行接一行。

在+侧：

我不愿意承认，如果你真诚地使用只是那一个表有一行一列并且里面有非常少量的数据（我称之为限制）那么页面会可能渲染速度比使用Javascript的时间要快，但其他问题仍然存在。

Answer 5

在表格中包含小数据之前，没有太大问题。对于浏览器来说，表格有点沉重，并且有更多数据进入，相比之下，它们会使您的网页响应速度变慢。

您展示的示例仅用于示例，但在现实世界中，您将拥有数据。如果它变得很大，请尝试选择不同的方法。可能是即将在所有现代浏览器中支持的flexbox model或box model。在这里查看示例。 http://www.kirupa.com/html5/centering_vertically_horizontally.htm

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

Answer 6

将我的话语引导到那些不关心标准或者提供多渠道内容的极客里面......如果你在那个单元格里面有大量的内容，那么我真的只能想到一个表格的技术问题。浏览器将等待所有内容加载，以便能够在渲染之前计算单元格的宽度和高度...因此，如果该内容非常大并且具有大图像，则它将不会逐渐呈现...并使其成为固定的表，嗯，上面的伎俩不起作用。

Answer 7

我取决于你想要达到的目标。如果它只是一个页面，其中一个中心，那么它很棒。

但是我看到你已经设置了表位：固定。这意味着它会随你滚动并继续下面的内容。另一件事是，如果那个表真的填满了，你将无法看到该表底部的什么，因为该位置被设置为固定。

这是一个很好的解决方案，可以将一小段文字，图像或信息集中在一起。

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

旁注：使用javascript来实现这样简单的东西，是愚蠢的。它可以在没有使用CSS的JavaScript的情况下完成。如果你使用javascript来集中某些内容，以及没有javascript访问的客户端怎么办？让我们不要使用javascript / jquery来破坏网络所有简单的东西;）

Answer 8

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

基本上，它的加载时间稍长（JavaScript速度较慢），对于屏幕阅读器来说很糟糕（用JAWS之类的方法测试它），并且很难重新设计（如果你碰巧忘了为什么会这么做的话真的很难把桌子放在那里，所以一定要给自己留言:)。什么会非常好（我在和你说话，W3C！）就像box-align: x y;。然后，您还可以执行align: center center或align: center bottom;等内容。

将div弹出窗口置于屏幕中心

8 个答案:

渲染速度问题：

有效性和标准：

SEO：

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

在+侧：