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

<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%);
}

更多信息

只需这样做：在div中添加类：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

请阅读本文以获得解释。注：高度是必需的。

仅垂直居中

如果您不关心InternetExplorer6和7，可以使用包含两个容器的技术。

外部容器：

应具有显示：table；

内部容器：

应具有显示：表格单元格；应垂直对齐：中间；

内容框：

应该有显示：inline块；

您可以将任何内容添加到内容框中，而不必考虑其宽度或高度！

演示：

正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；}.居中内容{显示：内联块；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>

另请参见此Fiddle！

水平和垂直居中

如果要水平和垂直居中，还需要以下内容。

内部容器：

文本应对齐：居中；

内容框：

应重新调整水平文本对齐方式，例如文本对齐方式：左对齐；或文本对齐：右；，除非您希望文本居中

演示：

正文{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；/*这可以是任意宽度*/高度：100%；/*这可能是任何高度*/背景：#ccc；}.内部容器{显示：表格单元格；垂直对齐：中间；文本对齐：居中；}.居中内容{显示：内联块；文本对齐：左侧；背景：#fff；填充：20px；边框：1px实心#000；}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>

另请参见此Fiddle！

这里有一个简单的方法，几乎没有代码：

CSS代码：

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML代码：

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

您的文本将位于页面中间！

将元素垂直居中的现代方法是使用flexbox。

你需要父母来决定身高，孩子来居中。

下面的示例将使div在浏览器中居中。重要的是（在我的示例中）将height:100%设置为body和html，然后将min-height:100%设置到容器。

正文，html{背景：#F5F5F5；框大小调整：边框框；高度：100%；边距：0；}#中心容器{对齐项目：居中；显示：柔性；最小高度：100%；}#中心{背景：白色；边距：0自动；填充：10px；文本对齐：居中；宽度：200px；}<div id='center_container'>我是中心</分区></div>

我最近发现了一个技巧：你需要使用前50%，然后再进行translateY（-50%）。

.外部div{位置：相对；高度：150px；宽度：150px；背景色：红色；}.居中div{位置：绝对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；背景色：白色；}<div class='outer-div'><div class='entered-div'>测试文本</div></div>