以响应方式垂直居中元素答案

【问题标题】：Vertically center elements with a responsive way以响应方式垂直居中元素
【发布时间】：2015-01-03 14:03:51
【问题描述】：

在学习响应式网页设计时，我想知道是否有标准程序可以以响应式方式垂直居中元素（div、图像或其他任何内容）。不是使用边距和填充的像素，而是使用百分比方式或类似的方式，以便获得响应式调整结果。就像水平对齐引导程序的中心块或居中的行和列一样。

【问题讨论】：

是否可以使用弹性盒子？ developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
我在谷歌搜索一个可能性？
不要使用谷歌使用必应。这里有一堆关于如何居中的不同技术：vanseodesign.com/blog/demo/vertical-centering/padding.php 这也是为了支持像 ie8 这样的古老浏览器。

标签： twitter-bootstrap-3 responsive-design center vertical-alignment

【解决方案1】：

<div style="display:table;background:blue;height:100vh;width:100vw;">
    <div style="display:table-row;">
        <div style="display:table-cell;text-align:center;vertical-align:middle;color:white;font-size:50px;">Blah</div>
    </div>
</div>

【讨论】：