尝试一下，在父div上添加：

display: flex;
align-items: center;

这是一个很好的资源

从…起http://howtocenterincss.com/:

以CSS为中心是一件令人头疼的事。根据各种因素，似乎有无数种方法可以做到这一点。这将整合它们，并为您提供每种情况所需的代码。

使用Flexbox

在保持这篇文章与最新技术保持同步的同时，这里有一个更容易的方法来使用Flexbox将内容居中。Internet Explorer 9及更低版本不支持Flexbox。

以下是一些很棒的资源：

Flexbox指南带Flexbox的定心元件Flexbox的Internet Explorer 10语法Flexbox支架

带有浏览器前缀的JSFiddle

李{显示：柔性；对齐内容：中心；对齐内容：居中；弯曲方向：柱；/*列|行*/}＜ul＞<li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

另一种解决方案

这是从零六三开始的，可以让你用六行CSS将任何东西居中

Internet Explorer 8及更低版本不支持此方法。

小提琴演奏家

p型{文本对齐：居中；位置：相对；顶部：50%；-ms变换：translateY（-50%）；-webkit转换：translateY（-50%）；变换：translateY（-50%）；}＜ul＞<li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

上一个答案

一种简单且跨浏览器的方法很有用，因为标记答案中的链接有点过时。

如何在无序列表和div中垂直和水平居中文本，而不使用JavaScript或CSS行高。无论您有多少文本，您都不必将任何特殊类应用于特定列表或div（每个列表或div的代码都相同）。这适用于所有主要浏览器，包括Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera和Safari。有两个特殊的样式表（一个用于InternetExplorer7，另一个用于Internet Explorer6）可以帮助它们，因为它们的CSS限制是现代浏览器所没有的。

Andy Howard-如何在无序列表或div中垂直和水平居中文本

由于我在上一个项目中不太关心InternetExplorer7/6，所以我使用了一个稍微精简的版本（即删除了使其在InternetExplorer7和6中工作的内容）。这可能对其他人有用。。。

JSFiddle公司

.外部容器{显示：表格；宽度：100px；/*父项的宽度*/高度：100px；/*父项的高度*/溢出：隐藏；}.outerContainer.innerContainer{显示：表格单元格；垂直对齐：中间；宽度：100%；边距：0自动；文本对齐：居中；}李{背景：#ddd；宽度：100px；高度：100px；}＜ul＞<li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li><li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li></ul>

嗯，显然有很多方法可以解决这个问题。

但我有一个绝对定位的＜div＞，高度：100%（实际上，顶部：0；底部：0，固定宽度），显示：表格单元格无法垂直居中文本。我的解决方案确实需要内部跨度元素，但我看到许多其他解决方案也需要，所以我不妨添加它：

我的容器是一个.label，我希望数字在其中垂直居中。我这样做是通过将绝对位置放在顶部：50%，并设置行高度：0

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

在行动中看到：http://jsfiddle.net/jcward/7gMLx/

这很好：

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

没有和带有图像标记＜mat icon＞（这是一种字体）。

您可以使用Flexbox在div内垂直对齐中心文本。

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

您可以在Flexbox完整指南中了解更多信息。

一个不知道价值的简单解决方案：

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}