8

我已经搜索了很多以div水平和垂直居中 a ，这是到处给出的方法：

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

我刚刚找到了一种新的解决方案div，可以通过将 a 包装在表格中来水平和垂直居中它。我已经在 ie7 及以上版本以及其他浏览器中对其进行了测试。

这是一个例子：http: //jsbin.com/ocenok/2/

我想知道第一种方法在 Internet、SO 等上随处可见，并且需要事先了解宽度和高度，或者通常通过 Javascript 计算。

表格方法似乎完美无缺，既不需要 javascript，也不需要固定的高度/宽度。

表格方法有什么缺点吗？

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

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

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

  1. 我知道使用 Javascript 可以轻松实现我想要的。
  2. 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;
}
4

8 回答 8

5

请参阅以下功能并根据您的需要进行更改

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：

jsFiddle

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/

于 2012-12-21T15:06:08.137 回答
2

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

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

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

使用表格为此后果自负——你不朽的灵魂可能会在未来某个日期为你今天的行为付出沉重的精神代价：p

于 2012-12-21T15:03:10.967 回答
2

根据StatCounter，截至 2012 年 11 月，IE7 仅占桌面浏览器使用份额的 0.87%。目前尚不清楚该测量的准确度。某些国家/地区的权重可能不成比例，并且样本集几乎可以肯定与您的用户人口统计数据不完全匹配，无论它们是什么。但是，如果把 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这是一个工作演示。我已经在 Mac 10.8.1 FF 18、Safari 6.0、Chrome 25.0.1362.0 canary 和 iOS Safari 6.0.1 上对此进行了测试。

于 2012-12-28T06:17:42.760 回答
2

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

渲染速度问题：

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

有效性和标准：

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

搜索引擎优化：

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

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

有关此的更多信息，请参见此处

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

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

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

在 + 方面：

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

于 2012-12-28T16:03:07.893 回答
1

除非表内有小数据，否则问题不大。表格对于浏览器来说有些沉重，并且随着更多数据的进入，它们会使您的网页响应比较慢。

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

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

于 2012-12-21T14:51:12.637 回答
1

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

于 2012-12-24T17:49:30.777 回答
1

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

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

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

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

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

于 2012-12-24T18:03:14.330 回答
0

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

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

于 2012-12-28T03:35:44.183 回答