在CSS中垂直居中一个块

Question

我试图取得以下结果：

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

Answer 1

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>

您可以使用几行代码将内容置于<main>中心：

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

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

https://jsfiddle.net/858vr2hf/

修改

更新了背景图片：

https://jsfiddle.net/s3dytc31/

Answer 2

给出位置：相对于浅蓝色（包装div）。

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

type

希望有所帮助！

Answer 3

请参阅this教程。它以简单的方式教导如何垂直居中元素。