您还可以使用以下财产。

display: flex; 
align-content: center; 
justify-content : center;

所有功劳都归于该链接所有者@Sebastian Ekström link；请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章，我还创建了一个演示小提琴。

只需要三行CSS（不包括供应商前缀），我们就可以借助转换来实现：translateY垂直居中，即使我们不知道它的高度。

CSS属性转换通常用于旋转和缩放元素，但通过其translateY函数，我们现在可以垂直对齐元素。通常，这必须通过绝对定位或设置行高度来完成，但这些要求您知道元素的高度，或者仅适用于单行文本等。

为此，我们写下：

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

这就是你所需要的。这是一种类似于绝对位置方法的技术，但其优点是我们不必在元素上设置任何高度，也不必在父元素上设置位置属性。它可以直接开箱即用，即使在Internet Explorer 9中也是如此！

为了使其更加简单，我们可以将其编写为带有供应商前缀的混合体。

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

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

我需要一排可点击的大象，垂直居中，但不用桌子来绕过一些InternetExplorer9的奇怪之处。

我最终找到了最好的CSS（满足我的需要），它与Firefox、Chrome和InternetExplorer11非常配合。遗憾的是，Internet Explorer 9仍然在嘲笑我。。。

第二部分{边框：1px蓝色虚线；显示：内联；线条高度：100px；高度：100px；}跨度{边框：1px纯红色；显示：内联块；线高度：正常；垂直对齐：中间；}.输出{边框：3px纯银；显示：内联块；}<div class=“out”onclick=“alert（1）”><div><span><img src=“http://www.birdfolk.co.uk/littleredsolo.png“/></span></div>＜div＞＜span＞一个可爱的可点击选项</span></div></div><div class=“out”onclick=“alert（2）”><div><span><img src=“http://www.birdfolk.co.uk/bang2/Ship01.png“/></span></div>＜div＞＜span＞点击一些迷人的东西。</span＞</div></div>

显然，你不需要边界，但它们可以帮助你了解它是如何工作的。

灵活的方法

第二部分{宽度：250px；最小高度：50px；线条高度：50px；文本对齐：居中；边框：1px实心#12346；边距底部：5px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet，consectetur adipiscing elit</span></div>＜div＞<span>Lorem ipsum dolor坐amet</span></div>＜div＞

这是个更好的主意。你也可以这样做

身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>