Roger Johansson 有一篇简洁的快速提示风格文章，介绍了如何通过将 html 元素设置为 display: table;，并将 body 元素设置为 display: table-cell; 以及 vertical-align: middle; 来垂直和水平居中页面内容。 请参阅完整代码以了解实现方式 文章中。
我同意这种方法。适用于所有现代浏览器和 IE 8 及更高版本。
但我不同意这一点
我看到有人说使用这些 CSS 属性创建“CSS 表格”并不比在 HTML 中使用表格更好。我不同意这种说法。
使用 CSS 更改元素的显示属性不会更改底层 HTML 的语义——它只会更改元素的显示方式。它不会将任意 HTML 元素转换为表格、th 或 td 元素。
对于这个小小的居中技巧，使用 display: table; 没什么大不了的。它会影响元素的显示方式，保持语义，一切正常。但是，当您开始使用 CSS 表格进行布局时，您将进入一个**依赖源顺序的布局**的世界。需要位于左上角的元素需要在标记中排在首位。需要位于右下角的元素需要在标记中排在最后。就像普通的表格一样。您不会使用任何其他定位来强制它们放置在不同的位置，因为那样的话，一开始就没有必要使用 CSS 表格。
浮动，尽管它们可能很糟糕，但没有这个问题。您可以交换浮动值并完全更改布局，而不管源顺序如何。CSS3 弹性盒模型，尽管不受支持，但允许您使用序数组值控制页面位置。
使用一堆 div（甚至花哨的 HTML5 语义元素）并强制它们表现得像表格一样，就像披着羊皮的狼。而且是的，我们之前走过这条路 =)
我认为很明显，Roger 的意思是使用 CSS 表格属性不会改变应用于它们的元素的语义。因此，如果您需要表格显示类的属性，无论这是否意味着失去源顺序的能力，您仍然可以保留应用于它们的任何内容的相同语义。
在逐个元素的级别上，语义*可能*保持不变，但文档本身的语义质量可能会受到影响。假设您有一个很酷的设计，其中徽标位于右下角。这很不寻常，但它可能是一个美丽而有效的设计。如果您使用一堆 div 或 section 或其他任何东西进行布局，使它们显示得像表格一样，则该徽标需要是最后一个列出的内容。
Roger 做了一些很好的研究，一种巧妙的技术，以及一些有趣的观点。我只是想表达我的观点，即 CSS 表格是一条危险的道路，除了像居中这样的技巧之外，几乎没有价值。
Chris，我认为你可能在这里想得太宽泛了。我个人认为表格显示属性类似于其他（与显示相关的）属性，如绝对和相对定位——它们是构建页面的工具带中的工具。我不会使用 AP 或 RP 构建整个页面（就像许多初学者那样），而是在需要时使用它们。
例如，动态生成的水平菜单。您可以将列表项显示为表格单元格，并让它们填充整个宽度，而不管项目数量如何。这不需要比列表项是浮动时更多的源顺序（您可以争辩说，可以使用边距魔法更改浮动顺序，但我离题了）。
我唯一希望的是他们没有将属性命名为“table”。虽然这最有意义且易于理解，但它引发了许多关于“表格布局”的不必要的争论。
嗨，Tyssen！
导航栏的事情似乎很合理。我更担心的是这个
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
使用表格作为导航栏是一种完全合乎逻辑且可接受的方法。Chris 正在讨论使用表格作为整个站点布局，关于这一点他是完全正确的。
Chris，我同意你的观点，使用表格显示并不是真正最好的解决方案，但浮动也依赖于源顺序。不深入探讨所有细微差别；为了使显示完全独立于源顺序，您必须使用绝对或固定定位。
我想这取决于具体情况？看看我通过更改一些浮动值（实际上没有其他任何操作）完全更改了此页面的布局。
http://cl.ly/58mX
基于浮动的布局需要在火中消亡。它们在略微降低源顺序依赖性方面带来的好处远远小于它们的脆弱性和复杂性。
是的，CSS 表格也存在源顺序依赖性问题，但它们允许的通用布局功能足够好，以至于我们可以暂时原谅它们。它们简单实用。
在未来几年中，CSS 布局最终将停止糟糕，因为 Flexbox 布局、Grid 布局和定位布局都将在今年制定规范，并在不久之后开始实施。
（我是 CSSWG 成员，让布局不再糟糕是我的主要目标。^_^）
另一种无需使用表格显示即可垂直和水平居中内容的方法是执行以下操作
#parent {position:relative;
}
#child {
dposition:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
这将使元素完全居中。确保元素未显示为块，因为它们的宽度为 100%
除非我为子元素定义高度，否则它对我不起作用。
当元素具有固定高度时，垂直居中并不难。真正棘手的是垂直居中具有灵活高度的元素，表格显示可以实现这一点。但是，我认为这对于居中固定高度的元素来说是一个好方法。
那是对的。我忘记了设置高度。
如果您需要居中图像，此代码效果非常好。将一些图像放入无序列表中，使列表项浮动。向它们添加此 css。加上一些盒阴影。您将拥有一个外观性感的画廊
这里没有狼，Roger 只是建议使用
display:table/table-cell;在容器内垂直和水平对齐单个元素。在他的示例中，您仍然可以在居中块内使元素浮动并保留您喜欢的**源顺序独立性**。我一直使用负边距底部技巧来垂直居中页面，但我喜欢您的方法的简单性。
多年来，我一直宣扬经典 HTML 不好，CSS 布局很好。为什么？因为使用 CSS，我们可以将内容与表示分离。因此，我们有 CSS 控制 HTML 布局，而 HTML 主体只是纯内容。但不久前，我创建了一个基于 display:table / table-cell; 原则的两行 CSS 框架 http://www.vcarrer.com/2010/10/two-lines-css-framework.html，我遇到了同样的道德困境，我是在重新发明经典 HTML 表格吗？但奇怪的是，结果是 CSS 非常简洁且强大，并且编码方法类似于 CSS 浮动编码逻辑。一方面，我们拥有非常强大的 CSS 技术，另一方面，我们对过去不希望做任何与表格相关的事情的恐惧。我很乐意听到更多关于这个主题的意见。
我看到很多网站使用元素负边距顶部等于要垂直居中的元素高度的一半。唯一的缺点是元素必须具有固定高度。
#center {
position: fixed;
height: 400px;
margin-top: -200px;
top: 50%;
}
不过，使用 display: table-cell 可能是最好的方法，它确实有效。
同时发布，没有看到你的。
+1 给您 :)
还有另一种方法，如果您定义了元素的高度（当您在窗口中居中内容时，您很可能将定义高度）
#container {
width: 600px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
}
只需确保您的顶部和左侧边距分别为高度和宽度的一半的负值。
如果元素没有固定高度，则 css 无用...如果我需要垂直居中元素，我更喜欢 javascript。在我看来，这更合乎逻辑。我从未想过布局或元素高度，只是一些 javascript 代码 :)
酷！
如果你使用的是一行元素，那么也需要一个table-row元素。否则，你可能会遇到Firefox和WebKit中元素错位的一些随机错误。这使得display:table的实用性变得微不足道。
老实说，这种方法只有一种情况是好的——你已经水平居中了页面，然后客户又决定也需要垂直居中…… 这种情况下，使用表格并重做整个布局就没有意义了。
……并且使用JavaScript来避免表格！真是奇迹 :)
我理解CSS提供了更好的灵活性，但这只对第一个例子有用，当你有一个拿不定主意的客户时。
就我个人而言，整个display: table-cell大多是矫枉过正的，如果你问我……当然，它偶尔会派上用场……但使用方式很糟糕……尤其是在它通常比……嗯……表格占用更多代码的情况下。
不过我喜欢Rugiles的解决方案——因为你通常会使用固定高度和垂直居中。
而且整个事情至少对我来说看起来像是：我真的很想用表格来布局，但我不能，因为它们是用来表示表格数据的……
好吧，我真的很想喝很多咖啡——所以我想用茶杯，但我不能，因为它适合装茶……所以我需要一个更大的咖啡杯，对吧？
CSS很好……但如果你想要看起来和感觉都像表格的东西——那就用表格。
我用这个。
#container {
width: 600px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
}
是的，它确实是披着羊皮的狼，哈哈，好文章=D
表格？说真的？仅仅听到这个词就让我浑身发痒。构建表格网站背后的整个思维过程，就是我最初几年作为设计师远离网页设计的原因。仅仅因为你使用CSS来构建表格，并不能让它变得更好。
表格是用来提供晚餐的，而不是网站。
让我想起了反对Comic Sans的战争。请不要忘记，万物皆有其用。HTML不会“提供”网站、表格或div。也就是说，网站确实需要表格。像许多人完全避免使用Comic Sans一样完全避免使用表格，这太愚蠢了。
至于这篇文章，谢谢。我喜欢这个想法。我想我会用它，尤其是在我需要垂直居中某些东西的时候。在考虑如何使用它时，我希望能避免声明高度，即使是最小高度。
干杯，Chris，
Dan B. Lee
在我看来，通过CSS将元素的display设置为“table”或“table-cell”只是创建表格的另一种方式。你最终会在CSS文件中充满“display: table”和“display: table-cell”声明，而不是在HTML文件中充满<tr>和<td>。
关于居中，我像这里其他几个人一样使用负边距方法。
<pre<<code<
#container {
width: 300px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -200px;
}
</code<</pre<
当需要居中一个大小可变的元素时，我倾向于使用JavaScript，但我意识到它不是一个万无一失的解决方案，因为有些人仍然坚持使用某些浏览器并禁用JavaScript……我不会打开那个潘多拉魔盒！; )
^^^ 对不起，发布得很糟糕 :(
在我看来，通过CSS将元素的display设置为“table”或“table-cell”只是创建表格的另一种方式。你最终会在CSS文件中充满“display: table”和“display: table-cell”声明，而不是在HTML文件中充满<tr>和<td>。
关于居中，我像这里其他几个人一样使用负边距方法。
#container {
width: 300px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -200px;
}
当需要居中一个大小可变的元素时，我倾向于使用JavaScript，但我意识到它不是一个万无一失的解决方案，因为有些人仍然坚持使用某些浏览器并禁用JavaScript……我不会打开那个潘多拉魔盒！; )
表格绝对不酷。
使用这种技术来垂直居中某些东西感觉很脏，但比许多替代方案要好。主要是因为这种用例意味着它是一个单单元格表格，仅用于垂直对齐。
底线？
1. 我不认为有人声称我们应该回到表格布局。
2. CSS3并没有像它应该那样提供一个纯CSS垂直对齐属性。
同意。
我认为人们忘记了表格对设计不利的主要原因。这不是因为它们使你的标记混乱或难以更改设计。而是因为它们没有语义，并导致可用性问题。
说Roger采用的是“披着羊皮的狼技术”，或者说他提倡非语义HTML，这是非常误导的。作为一名无障碍专家，我怀疑这不是他想要表达的观点。
CSS display:table属性的用途纯粹与设计相关，与浮动和绝对定位一样有理由使用。只要它不影响你的HTML标记，我认为使用它没有任何问题。
它们也很糟糕，因为它们速度很慢。与表格相比，自定义CSS布局（使用浮动或定位）加载速度非常快。尤其是在页面很长并且存在嵌套表格时。嵌套DIV不会真正影响速度（如果有的话），但嵌套表格会。
我假设CSS表格没有速度问题，但我老实说不知道是不是这样，因为我从未使用过它们，也没有见过任何基于此的性能测试。
哇，评论中有很多令人惊讶的错误信息。“哦，表格不好”的本能反应完全错过了重点。Chris自己的观点是创建了源顺序依赖关系，而不是说拥有另一个用于确定布局行为的工具是不好的。
谢天谢地，至少有几个人指出你不需要在任何地方都使用它。
你不需要在CSS中到处写“display: table-cell”语句……如果你正确地编写CSS，你会将类似的元素组合在一起，一次声明尽可能多的元素。你甚至可以通过添加一个只为添加它的元素设置display: table-cell的类来做到这一点，但我也不喜欢类垃圾。
它只是一个工具。它不是黑客手段。使用该display属性并不会创建表格。在有意义的地方使用它。在Chris的“更改为float:left”示例中，我会使用浮动。但这并不意味着在其他地方没有使用display: table-cell的空间。
我是说，说真的……我们愿意修改和欺骗CSS以达到我们的目的，发现原始规范甚至可能没有预期的各种属性的用例……（用于居中的负边距？它可能有效，但它是一个黑客手段！）但我们不愿意使用一个正确且可接受的属性？
如果有效，这是一个很巧妙的技巧——其他解决方案总是很丑陋，并且意味着要摆弄边距和像素值。这很有潜力。
很高兴收到关于更普遍地将css表格用于标记而不是浮动的警告。我还没有尝试过它们……
我个人认为使用display:table;不是坏习惯或类似的东西。
这是我3年前构建的一个网站，我使用了这种技术，并且一切运行都很流畅，即使在IE6中也是如此（除了CSS圆角，但我并不介意）。顺便说一下，它是有效的HTML和CSS。
http://jpginfo.com/
干杯，
Ken
非常巧妙的技巧。很有趣。稍后会尝试看看是否适合我！
我想知道大家对此有什么看法？
http://expression.microsoft.com/en-us/dd794430.aspx 作者提出的方法是否可以接受？
我以前从未听说过这个，但这确实让我感到不安。让div或其他布局元素充当表格肯定不是正确的方法。我们花了10年的时间试图摆脱表格布局，仅仅因为我们想做一件事，我们就认为可以修改CSS来回到旧方法。我知道没人说要回到表格布局，但我认为这里的所有版本都是黑客手段，所以让我们坚持使用非表格版本。
display:table是CSS规范的一部分。它不是黑客手段。如果你需要你的设计以表格格式显示，那么说你想让一段内容以表格格式显示并没有错。
现在所有主要浏览器都提供了良好的CSS支持，在你的标记中使用表格进行布局显然是错误的方法。但是，正如评论所证明的那样，有些人似乎不明白HTML和CSS之间的区别。CSS的全部目的是页面设计和布局。而CSS正是表格式设计代码应该出现的地方。
当有更好的 CSS 属性可用时，强迫人们使用一些复杂的浮动或奇怪的边距来实现本应像表格一样的设计是没有意义的。也许如果他们将其重命名为类似 display:grid 的东西，就不会让每个人都感到不爽。不要纠结于它的措辞；这是一个有用的属性，并且有其作用。
表格一直以来都是万恶之源！即使它们看起来快速、高效且良好——从长远来看，它们会在背后刺伤你。原则上，我永远不会使用表格。好的博客——我喜欢辩论……让生活更有趣。
不错的技巧
我记得我曾经用 div 做过一些事情，而它需要相同数量的 tr/td 标签，并且 CSS 代码要少得多。
/facepalm myself