声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}

我只是找到了另一种对我有用的方法：

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

更多信息

Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。

.外部{位置：绝对；显示：表格；宽度：100%；高度：100%；文本对齐：居中；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{文本对齐：居中；显示：内联块；宽度：自动；}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</div></div></div>

现在，Flexbox解决方案是现代浏览器的一种非常简单的方式，因此我向您推荐：

.容器{显示：柔性；对齐项目：居中；对齐内容：中心；高度：100%；背景：绿色；}身体html格式{高度：100%；}<div class=“container”><div>div垂直对齐</div></div>

此方法不使用任何变换。因此，输出变得模糊没有问题。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

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

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

这是结果。