在CSS中使内容垂直居中的所有方法
对网络上的垂直居中问题说拜拜吧
对于理论上如此简单的事情，在CSS中垂直居中的元素并不是最容易完成的任务。在浏览器开始支持像flex和grid这样的现代CSS附加功能之前，这种说法尤其正确。
在这篇文章中，我们将讨论一些较早的技巧和较现代的方法，以便开发者在CSS中对内容进行垂直居中。由于这个问题没有一个放之四海而皆准的解决方案，因为每一种方法都有自己的局限性，所以了解这些方法中的每一种，以便在不同的情况下找到正确的解决方案，也是无妨的。
让我们开始吧!
如果你知道高度...
CSS的一个老把戏是利用position属性将一个元素垂直居中。在这里，我们给元素一个绝对的位置，并以一种将元素推向中心的方式来设置边距。
使用自动边距
我们可以为元素的顶部和底部位置提供相等的值，并将边距设置为自动。这样就会自动地将元素置于中心位置，并沿Y轴有适当的边距。在这个例子中，我们已经将上下位置设置为零。然而，我们必须特别设置元素的高度，以防止它跨越整个高度。
.item {
position: absolute;
top: 0; bottom: 0;
margin: auto;
height: 50vh;
}
在 CodePen上看这支笔（@livecodestream）。
使用负边距
在这个方法中，我们把顶部放在垂直方向的中间点（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*/
}
在 CodePen上看笔（@livecodestream）。
在这里，我们也必须明确设置元素的高度，以获得 margin-top 的正确值。但在大多数情况下，考虑到高度应该考虑到宽度变化、文本调整等因素，我们不想为元素设置一个显式的高度。因此，在大多数情况下，这两种方法对于垂直居中并不理想。
不需要用翻译的高度
我们可以调整最后一种居中方法，得出一个摆脱显性高度问题的解决方案。这里，在将元素的顶部定位在中心后，我们使用translateY将其沿Y轴向上移动50%。
.item {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
在CodePen上看到这支笔(@livecodestream)。
表格和垂直对齐
对于放置在表格单元中的内容，CSS支持垂直对齐属性。我们可以利用这一点，将该元素声明为一个表格单元（其父级为一个表格），以使其内容居中。如果你使用的是一个div，将其显示方式设置为table-cell。或者你可以使用实际的表格元素，但这种解决方案在语义上并不正确。
.container {
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
}
在CodePen上看到这支笔(@livecodestream)。
与上一个居中方法类似，在使用表格时，你不必为元素设置一个明确的高度。但如果你想在单元格内放置一个非居中的元素，这种方法并不理想。
使用Flex的垂直居中
说Flex的引入解决了很多网页开发者面临的设计难题，包括垂直居中，这并没有错。有了这种对CSS的现代补充，我们可以很容易地产生简单的、响应性的、直接的垂直居中解决方案。
这些基于柔性的解决方案的唯一缺点是，它们不被早期版本的Internet Explorer（低于IE9）所支持。而且你必须使用webkit、moz或ms前缀来支持其他一些较早的浏览器版本。
不过，即使如此，flex也为管理页面布局和元素定位增加了难以置信的灵活性。在这里，我们将探讨一些用flex将内容居中的方法。
使用Flex容器和对齐项目
我们可以使用align-items和justify-content属性来指定父Flexbox内的项目的对齐方式。当我们将align-items设置为居中时，如果flex-direction等于行（默认），它就会将flexbox内的所有项目垂直居中。
.container {
display: flex;
align-items: center;
}
在CodePen上看到这支笔(@livecodestream)。
如果你正在寻找一个解决方案，让单个元素垂直居中，下一个方法会更适合你。
使用Flex Items和Align Self
这个解决方案可以让你自由地在Flexbox中只对一个元素进行垂直居中。它利用flex属性align-self，将元素置于中心位置。
.container {
display: flex;
}
.center {
align-self: center;
}
在CodePen上看到这支笔(@livecodestream)。
使用 Flex Container 和 Margin Auto
另一种将单个元素置于Flex容器中心的方法是将其边距设置为自动。然后，浏览器会自动计算适当的边距，使其在两个方向都居中。
.container {
display: flex;
}
.item {
margin: auto;
}
在CodePen上看到这支笔(@livecodestream)。
使用Flex容器中的幽灵项目
使用鬼魂元素并不是最漂亮的内容居中方法。但它可以完成工作。作为回报，你可以在垂直方向上获得灵活的间距。你可以在Flexbox内堆叠多个项目，并使用ghost元素将它们推至中心。
.container {
display: flex;
flex-direction: column;
}
.container::before, .container::after {
content: "";
flex: 1;
}
在CodePen上看到这支笔(@livecodestream)。
使用CSS网格进行垂直居中
网格是近年来对CSS最强大的补充之一。由于它允许我们沿x轴和y轴控制布局，所以用CSS网格垂直居中是非常简单的。而且，它为我们提供了许多方法来实现这一任务。
与flexbox类似，现代浏览器的旧版本也不完全支持grid，包括Internet Explorer、Chrome和Firefox。一些旧版本提供了启用对grid支持的选项，尽管它在默认情况下是不可用的。
使用grid垂直居中的前几种方式与我们使用flexbox的方式类似。让我们看看它们是如何工作的例子。
使用网格容器和对齐项目
我们可以通过将align-items属性设置为居中，使网格内的所有项目垂直居中。
.container {
display: grid;
align-items:center;
}
如果你想让父元素内的多个项目垂直居中，请确保将网格分成几列，将它们放在同一行中。
在CodePen上看到这支笔(@livecodestream)。
用网格项目和对齐自己
如果你想在网格内只让一个项目居中，使用align-self: center来设计这个特定项目。
.container {
display: grid;
}
.center {
align-self: center;
}
在CodePen上看到这支笔(@livecodestream)。
使用网格容器和自动边距
类似于我们对 Flexbox 所做的，我们可以通过将其边距设置为自动来垂直居中网格内的一个项目。
.container {
display: grid;
}
.center {
margin: auto;
}
在CodePen上看到这支笔(@livecodestream)。
在网格上使用幽灵元素
我们可以将Flexbox中的幽灵元素技巧调整到CSS网格上。要做到这一点，首先，我们需要创建一个有三行的网格。然后，我们添加的幽灵元素会占用第一行和最后一行的空间，将我们的元素推到中间一行。
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.container::before, .container::after {
content: "";
}
在CodePen上看到这支笔(@livecodestream)。
用精确的元素位置
网格允许我们在几个项目属性的帮助下声明一个元素应该被放置的确切位置。我们可以利用这一特性将元素准确地放置在三行网格的中心，使我们的生活更加轻松。
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.item {
grid-row:2;
}
在CodePen上看到这支笔(@livecodestream)。
总结
今天，我们讨论了如何解决网页开发者生活中经常出现的头痛问题之一，即垂直居中的内容。我们谈到了近13种不同的方法来实现这一任务。我希望这已经涵盖了所有内容。如果你有更多关于内容垂直居中的技巧和提示，不要忘记在评论中与我们分享。
