这不是一个关于居中事物的综合指南。 我们有这个！
这只是一个关于新旧的小观察。 在 CSS 中，关于居中比较棘手的事情之一是，当您需要垂直和水平居中，而您不知道要居中内容的宽度或高度时。 垂直居中比水平居中更棘手。
信不信由你，即使在 IE 8 中也有一种方法可以做到这一点。诀窍是利用 display: table; 以及表格的另一个属性 vertical-align: middle;，它可以用于垂直居中。
假设您只想将一个句子完美地居中在浏览器窗口的中间
...
<body>
<span>
Centered vertically and horizontally.
</span>
</body>
...您可以像这样做到：
html, body {
margin: 0;
height: 100%;
}
body {
display: table;
width: 100%;
}
body > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}这可能是 CSS 居中之书中最古老的技巧。 这是 在 IE 8 中工作的例子
如今我们有了更现代的布局方法。 Flexbox! CSS Grid!
以下是使用最现代方法完成同样任务的方法
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
我们甚至不需要在那里触摸 span！ 事实上，这太前沿了，以至于支持 CSS Grid 的 Microsoft Edge 还不支持 place-items。 您需要使用 align-items: center; 和 justify-content: center; 来代替。
一直在前进。
哈哈，“前沿”！ 我明白你的意思。
在最酷的旧方法中，您实际上不需要在 html 或 body 上设置高度。 在最酷的新方法中，您可以使用
place-items的简写形式；一个“center”将同时在两个轴上居中。我只能使用 IE11 及更高版本支持的方法，所以目前我喜欢使用绝对定位和 -50% 变换…
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
IE11 支持 flexbox，但有一些错误。 这行得通
您也可以使用
按预期工作。
translate 方法的问题是，如果您需要在某个时候使用 transform scale，它将不再按预期工作。
translate 技巧的另一个问题是，当使用此技巧打印页面内容时，居中效果不正确。 因为（许多）打印机驱动程序不支持 CSS 变换。 至少，这是我发现的情况。
那天我本可以利用这种酷的新方法，唉，我知道下次该用什么了。
您可以避免使用（这本来应该是一个
<
div>）即使使用旧方法：将 html 元素设置为 display: table，将 body 设置为 display: table-cell。 然后您可以在 body 本身中进行所有对齐。
不确定现在有多相关，但至少您不需要额外的标记。
新代码有一个主要问题。 只要您添加第二个块级元素（例如第二个段落），grid 就会创建两个行，每个行占据视窗高度的一半，并将段落分别居中放置在每个行中。 当使用更多段落时，它将需要一个额外的包装器。
我仍然更喜欢 flexbox
flexbox 方法也是这样吗？
display: flex;
align-items: center;
justify-content: center;
:)
@Chris…. 为什么他们没有想到这个
place-items: middle;
它会在一个声明中垂直和水平对齐吗？
因为这不起作用。 正确的用法是
place-items: center;或place-items: center center;请阅读最后一段，了解原因
我最喜欢的