我最近发现了一个技巧：你需要使用前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>

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

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

更多信息

我这样做了（相应地改变宽度、高度、顶部边距和左侧边距）：

.wrapper {
    width: 960px;
    height: 590px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -295px;
    margin-left: -480px;
}

<div class="wrapper"> -- Content -- </div>

特别是对于具有相对（未知）高度的父div，未知解决方案中的居中对我来说非常有用。

它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。

/*此父项可以是任何宽度和高度*/.块{文本对齐：居中；}/*鬼魂被推着保持完美的居中*/.block：之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；右边距：-0.25em；/*调整间距*/}/*要居中的元素可以也可以是任何宽度和高度*/.居中{显示：内联块；垂直对齐：中间；宽度：300px；}<div style=“width:400px；height:200px；”><div class=“block”style=“高度：90%；宽度：100%”><div class=“center”><h1>一些文本</h1><p>任何其他文本。。。“”</p></div></div></div>

对于新手，请尝试：

display: flex;
align-items: center;
justify-content: center;

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

CSS代码：

.main{
    height: 100%;
}

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

HTML代码：

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

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