这是在CSS中使用calc（）的div模式中div的另一种变体。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

这是有效的，因为：

position:absolute用于在div中精确放置div我们知道内部div的高度，因为我们将其设置为20px。计算（50%-10px），用于对中内隔板高度的50%-一半

您需要添加line-height属性，该属性必须与div的高度匹配。在您的情况下：

.中心{高度：309px；线条高度：309px；/*与高度相同*/}<div class=“center”>一行。</div>

实际上，您可能可以完全删除高度属性。

这只适用于一行文本，所以要小心。

这是一个很好的资源

从…起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>

非常简单的解决方案，我在我的项目中多次使用它：

源代码

.welcome_box{
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: solid 1px #dadada;
}

<div class="welcome_box">Hello Friends</div>

输出：

谢谢你提出这个问题。很高兴分享。

这里有一个最适合单行文本的解决方案。

如果知道行数，它还可以对多行文本进行一些调整。

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

这是一个JSFiddle。

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }