您可以在CSS中使用定位方法：

检查此处的结果。。。。

HTML格式：

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

对于单行文本（或单个字符），可以使用以下技术：

当#box具有非固定的相对高度（以%为单位）时，可以使用它。

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

在JsBin（更容易编辑CSS）或JsFiddle（更容易更改结果框的高度）观看现场演示。

如果你想将内部文本放在HTML中，而不是CSS中，那么你需要将文本内容包装在额外的内联元素中，然后编辑#box:：after以匹配它。（当然，content:property应该被删除。）

例如<div id=“box”><span>文本内容</span></div>。在这种情况下，#box：：after应替换为#box span。

对于Internet Explorer 8支持，必须将：：替换为：。

这是使用Flexbox的另一个选项。

#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右：

margin-top: 45%;

你可能需要玩这个数字，但它将位于周围分区的中心。

这非常有效。

您必须为div使用表样式，为内容使用居中对齐。

一个非常简单和最强大的垂直对齐中心的解决方案：

.外部div{高度：200px；宽度：200px；文本对齐：居中；边框：1px实心#000；}.内部{位置：相对；顶部：50%；变换：translateY（-50%）；颜色：红色；}<div class=“outer div”><span class=“inner”>无可用数据</span></div>