使用flex时，请注意浏览器渲染的差异。

这对Chrome和Internet Explorer都很有效：

.外部{显示：柔性；宽度：200px；高度：200px；背景色：#ffc；}.内部{显示：柔性；宽度：50%；高度：50%；边距：自动；文本对齐：居中；对齐内容：中心；对齐项目：居中；背景色：#fcc；}活动任务</div></div>

与仅适用于Chrome的这款相比：

.外部{显示：柔性；宽度：200px；高度：200px；背景色：#ffc；}.内部{显示：柔性；宽度：50%；高度：50%；边距：自动；背景色：#fcc；}<div class=“outer”>活动任务</span></div></div>

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

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%);
}

尝试嵌入表元素。

＜div＞<table style='width:200px；高度：100px；'><td style='vertical-align:middle；'>哥本哈根</td></table></div>

这将使文本垂直居中：

.父级{显示：内联柔性}.推荐文本{边距顶部：自动；边距底部：自动；}<div class=“parent”><div class=“推荐文本”>你好，世界</div></div>

有一种更简单的方法可以垂直对齐内容，而无需诉诸表格/表格单元格：

http://jsfiddle.net/bBW5w/1/

在其中，我添加了一个不可见的（width=0）div，它假设容器的整个高度。

它似乎可以在Internet Explorer和Firefox（最新版本）中使用。我没有检查其他浏览器

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

当然，CSS：

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Flexbox非常适合我，将父div中的多个元素水平和垂直居中。

下面的代码将父div内的所有元素堆叠在一列中，并将元素水平和垂直居中。我使用子div将两个Anchor元素保持在同一行（行）上。在没有子div的情况下，所有三个元素（Anchor、Anchor和Paragraph）都堆叠在父div的列中。这里只有子div堆叠在父div列中。

.父div{高度：150px；显示：柔性；弯曲方向：柱；对齐内容：中心；背景：粉色；}<div class=“parent div”><div class=“child div”><a class=“footer link”href=“https://www.github.com/“>GitHub</a><a class=“footer link”href=“https://www.facebook.com/“>脸书</a><p class=“footer copywrite”>©2019 Lorem Ipsum</p＞</div></div>