我刚刚写了这篇CSS，想了解更多信息，请浏览：这篇文章用3行CSS垂直对齐任何内容。

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

最简单的方法是以下三行CSS：

1） 位置：相对；

2） 顶部：50%；

3） 变换：translateY（-50%）；

以下是一个示例：

外部配电盘{高度：170px；宽度：300px；背景色：浅灰色；}中间分隔符{位置：相对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；}<div class='outer-div'><div class='middle-div'>测试文本</div></div>

实际上，垂直居中需要两个div。包含内容的div必须具有宽度和高度。

#集装箱{位置：绝对；顶部：50%；页边空白：-200像素；/*#内容高度的一半*/左：0；宽度：100%；}#内容{宽度：624px；左边距：自动；右边距：自动；高度：395px；边框：1px实心#000000；}<div id=“container”><div id=“content”><h1>居中的div</h1></div></div>

这是结果。

最好的做法是：

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150像素，因为在本例中，这是div高度的一半。

不回答浏览器兼容性，但也要提到新的网格和不那么新的Flexbox功能。

Grid

来自：Mozilla-网格文档-垂直对齐Div

浏览器支持：网格浏览器支持

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML格式：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

柔性包装箱

浏览器支持：Flexbox浏览器支持

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

不幸的是，但并不令人惊讶的是，解决方案比人们希望的更复杂。同样不幸的是你需要在垂直居中的div周围使用额外的div。

对于符合标准的浏览器，如Mozilla、Opera、Safari等，您需要将外部div设置为显示为表，将内部div设置为表单元格-然后可以垂直居中。对于InternetExplorer，您需要将内部div绝对放置在外部div中，然后将顶部指定为50%。以下页面很好地解释了这一技术，并提供了一些代码示例：

CSS中的垂直居中未知高度的CSS垂直居中（兼容Internet Explorer 7）（Wayback Machine提供的存档文章）

还有一种使用JavaScript进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐演示了这一点。