我不确定是否有人走上了写作模式的道路，但我认为它彻底解决了问题，并得到了广泛的支持：

.垂直{//边框：1px实心绿色；写入模式：垂直lr；文本对齐：居中；高度：100%；宽度：100%；}.水平{//边框：1px纯蓝色；显示：内联块；书写方式：水平tb；宽度：100%；文本对齐：居中；}.内容{文本对齐：左侧；显示：内联块；边框：1px实心#e0e0e0；衬垫：.5em 1em；边界半径：1em；}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>

当然，这将适用于您需要的任何维度（除了100%的父维度）。如果取消注释边界线，这将有助于熟悉自己。

JSFiddle演示供您摆弄。

犬只支持：85.22%+6.26%=91.48%（甚至Internet Explorer也支持！）

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

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

满足所有垂直对齐需求！

声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}

我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。

例子：

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

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看！

尝试此解决方案：

.扩展器{位置：绝对；顶部：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+构建。