CSS垂直居中内容的所有方法（如何垂直居中（））

对于理论上如此简单的事情，CSS 中的垂直居中元素并不是最容易完成的任务。在浏览器开始支持对 CSS 的现代添加（如 flex 和 grid）之前，这种说法尤其正确。
CSS垂直居中内容的方法有哪些？在这篇文章中，我们将讨论开发人员用来在 CSS 中垂直居中内容的一些旧技巧和更现代的方法。由于此问题没有一刀切的解决方案，因为每个解决方案都有其自身的局限性，因此了解这些方法中的每一种以在不同场景中找到正确的解决方案并没有什么坏处，包括详细的CSS垂直居中内容代码示例。
让我们开始吧！
如果你知道height……CSS 的老技巧之一是借助 position 属性使元素垂直居中。在这里，我们给元素一个绝对位置，并以将元素推到中心的方式设置边距。
使用自动边距
CSS如何垂直居中内容？我们可以为元素的顶部和底部位置提供相等的值，并将边距设置为自动。这会自动将元素沿 y 轴以适当的边距居中。在本例中，我们将顶部和底部位置设置为零。但是，我们必须专门设置元素的高度，以防止它跨越整个高度。

.item { position: absolute; top: 0; bottom: 0; margin: auto; height: 50vh; }

CSS垂直居中内容的方法：负边距
在这种方法中，我们将顶部放置在垂直方向的中点（50%）。然后使用负边距将元素的上半部分移动到中点上方。

.item { position: absolute; top: 50%; left: 10vw; right: 10vw; height: 50vh; margin-top: -25vh; /*also consider padding and border sizes, if any, when calculating the margin*/ }

在这里，我们也必须显式设置元素高度以获得正确的 margin-top 值。但是在大多数情况下，我们不想为元素设置明确的高度，因为高度应该考虑宽度变化、文本调整等。因此，这两种方法在大多数情况下并不适合垂直居中。
使用翻译无需height我们可以调整最后一个居中方法，以提出一个解决方案，以逃避具有明确高度的问题。在这里，将元素的顶部定位在中心后，我们使用 translateY 将其沿 y 轴向上移动 50%。

.item { position: absolute; top: 50%; transform: translateY(-50%); }

表格和垂直对齐CSS 支持放置在表格单元格内的内容的 vertical-align 属性。我们可以利用这一点并将元素声明为表格单元格（并将其父元素声明为表格）以将其内容居中。如果你使用的是 div，请将其显示设置为 table-cell。或者你可以使用实际的表格元素，但此解决方案在语义上不正确，如下CSS垂直居中内容代码示例：

.container { display: table; }.item { display: table-cell; vertical-align: middle; }

与最后一种居中方法类似，在使用表格时，你不必为元素设置明确的高度。但是如果你想在单元格内放置一个不居中的元素，这种方法并不理想。
使用 Flex 垂直居中CSS如何垂直居中内容？可以说 flex 的引入解决了 Web 开发人员面临的许多设计难题，包括垂直居中。通过对 CSS 的这种现代补充，我们可以轻松地生成简单、响应式和直接的垂直居中解决方案。
这些基于 flex 的解决方案的唯一缺点是早期版本的 Internet Explorer（低于 IE9）不支持它们。并且你必须使用 webkit、moz 或 ms 前缀来支持其他一些较旧的浏览器版本。
尽管如此，flex 还是为管理页面布局和元素定位增加了难以置信的灵活性。在这里，我们将探索一些使用 flex 将内容居中的方法。
使用 Flex 容器和对齐项目
CSS垂直居中内容的方法：我们可以使用 align-items 和 justify-content 属性指定父 flexbox 内项目的对齐方式。当我们将 align-items 设置为 center 时，如果 flex-direction 等于 row（默认值），它会将 flexbox 内的所有项目垂直居中。

.container { display: flex; align-items: center; }

如果你正在寻找垂直居中单个元素的解决方案，下一个方法将更适合你。
使用 Flex 项目并对齐自身
这个解决方案让你可以自由地在 flexbox 中仅垂直居中一个元素。它利用 flex 属性 align-self 将元素放置在中心。

.container { display: flex; }.center { align-self: center; }

使用 Flex Container 和 Margin Auto
另一种在 flex 容器中使单个元素居中的方法是将其边距设置为 auto。然后，浏览器会自动计算适当的边距，使其在两个方向上居中。

.container { display: flex; }.item { margin: auto; }

在 Flex 容器中使用 Ghost 项目
使用幽灵元素并不是使内容居中的最佳方式。但它完成了工作。作为回报，你可以在垂直方向上灵活设置间距。你可以在 flexbox 内堆叠多个项目，并使用 ghost 元素将它们推到中心，CSS垂直居中内容代码示例如下：

.container { display: flex; flex-direction: column; }.container::before, .container::after { content: ""; flex: 1; }

CSS如何垂直居中内容：使用 CSS 网格垂直居中Grid 是近年来最强大的 CSS 补充之一。由于它允许我们沿 x 轴和 y 轴控制布局，因此使用 CSS 网格垂直居中非常简单。它为我们提供了多种方法来完成这项任务。
与 flexbox 类似，旧版本的现代浏览器并不完全支持网格，包括 Internet Explorer、Chrome 和 Firefox。一些旧版本提供了启用网格支持的选项，即使它在默认情况下不可用。
前几种使用 grid 垂直居中的方式遵循与我们使用 flexbox 所做的类似的模式。让我们看看它们如何工作的例子。
使用网格容器和对齐项目
我们可以通过将 align-items 属性设置为 center 来垂直居中网格内的所有项目。

.container { display: grid; align-items:center; }

如果要在父元素内垂直居中多个项目，请确保将网格分成多列以将它们放在同一行中。
CSS垂直居中内容的方法：使用网格项并对齐自身
如果你只想将网格内的一项居中，请使用 align-self: center 来设置该特定项的样式。

.container { display: grid; }.center { align-self: center; }

使用 Grid Container 和 Margin Auto
与我们对 flexbox 所做的类似，我们可以通过将其边距设置为 auto 来垂直居中网格内的单个项目。

.container { display: grid; }.center { margin: auto; }

网格上的幽灵元素
CSS垂直居中内容代码示例：我们可以将我们使用 flexbox 所做的幽灵元素技巧调整为 CSS 网格。为此，首先，我们需要创建一个包含三行的网格。然后，我们添加的幽灵元素占用第一行和最后一行的空间，将我们的元素推到中间行。

.container { display: grid; grid-template-rows: repeat(3, 1fr); }.container::before, .container::after { content: ""; }

使用精确的元素放置CSS如何垂直居中内容？Grid 允许我们在几个项目属性的帮助下声明元素应该放置的确切位置。我们可以使用此功能将元素准确地放置在三行网格的中心，让我们的生活更轻松。

.container { display: grid; grid-template-rows: repeat(3, 1fr); }.item { grid-row:2; }

CSS垂直居中内容的方法总结【CSS垂直居中内容的所有方法（如何垂直居中（））】今天，我们讨论了如何解决 Web 开发人员生活中反复出现的问题之一，即垂直居中的内容。我们讨论了近 13 种不同的方法来完成这项任务。我希望能涵盖这一切。如果你有关于垂直居中内容的更多技巧和窍门，请不要忘记在评论中与我们分享。