Html 在CSS中将块垂直居中

我正在努力实现以下结果：

---

如何将第二块垂直对齐到页面中间。（在移动设备中也是如此）

给出位置：相对于浅蓝色（wrapper div）

并为要居中的div添加以下css：

position: absolute;
top: 50%;
left: 50%;
width: 100%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;

---

希望有帮助

Flexbox来救援。给出如下简单的html布局：

<header></header>
<main>
    <h1>Heading</h1>
    <h2>Sub Heading</h2>
    <div>
        <a href="#">Click Me</a>
        <a href="#">Click Me</a>
    </div>
</main>
<footer></footer>

第一条规则建立flexbox上下文，中间样式规则垂直和水平对齐内容，最后一条规则确保项目从上到下对齐，而不是从左到右对齐。由于锚定按钮包含在一个div中，因此div本身就是flexbox对齐的对象，按钮可以并排自由放置

编辑：

更新了背景图片：

---

请参阅本教程。它以一种简单的方式教授如何垂直居中元素。

它不起作用，因为所有树框都由一个父对象包装。因此，中间的区块根据其内容占据了确切的高度。谢谢！我想它会工作，但需要修改我现有的布局。所有三个块都包装在一个具有背景图像的父容器中。因此，main、footer和header是具有背景图像的父对象的一部分。（它不工作，因为它有父项）。第二件事，我担心FlexBox的支持。我的目标是最新版本的Firefox和Chrome。只需对代码稍加修改，并使用

calc

函数，我就达到了我想要的效果。谢谢没问题。另外，请参阅我的编辑以了解纯flexbox解决方案。Flexbox完全由Firefox和Chrome支持，仅供参考。是的，我已经在caniuse.com上查过了，我希望CSS4将来能解决很多问题。

main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}