这很简单，也很短：

.块{显示：表格行；垂直对齐：中间；}.平铺{显示：表格单元格；垂直对齐：中间；文本对齐：居中；宽度：500px；高度：100px；}<div class=“body”><span class=“tile”>你好，中间世界！：）</span></div>

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

当#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支持，必须将：：替换为：。

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

margin-top: 45%;

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

这非常有效。

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

.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

尝试此解决方案：

.扩展器{位置：绝对；顶部：0px；左：0px；底部：0px；右：0px；宽度：100%；高度：100%；overflow-y：隐藏；overflow-x：隐藏；}.衬垫中心{宽度：100%；高度：100%；显示：-webkit框；显示：-moz框；显示：-ms flexbox；显示：-webkit flex；显示：柔性；-webkit盒子包：中心；-moz盒装：中心；-ms柔性包装：中心；-webkit调整内容：中心；对齐内容：中心；-webkit框对齐：居中；-moz框对齐：居中；-ms flex align:中心；-webkit对齐项目：中心；对齐项目：居中；}<div class=“EXTENDER”><div class=“PADDER-CENTER”><div contentEditable=“true”>编辑此文本</分区></div></div>

使用CSS+构建。