html - 使用 CSS flex 的两个全高页面

Question

我想构建一个包含两页全高的简单网页。 这两个页面有一个居中 block 和底部的小文本(带图标)。

这是一个例子:https://jsfiddle.net/f93wm58r/

<div id="how-to" class="section how-to">
    <div id="title" class="title">title</div>
    <div id="code" class=" code">title</div>
    <div id="view-more" class="view-more">
        <span>View intructions</span>
        <br/> <!-- other option ? -->
        <i class="fa fa-arrow-down view-more--arrow"></i>
    </div>
</div>
<div id="instructions" class="section instructions">
    <div id="intructions" class="instructions">instructions</div>
    <div id="view-more" class="view-more">
        <span>Go back</span><br/>
        <i class="fa fa-arrow-up view-more--arrow"></i>
    </div>
</div>


body {
    font-family: "Source Sans Pro","Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    background-color: #FFF;
}
.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-flow: column wrap;
    align-content: space-between;
}
.title {
    margin-top: auto;
    font-weight: bold;
    font-size: 4rem;
}
.view-more {
    color: #D1D1D1;
    text-align: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: 10px;
}
.view-instructions {
    margin-top: auto;
}
.view-more--arrow {
    font-size: 2rem;
}

正如您在第二页上看到的那样，文本没有居中。 我错过了什么？

额外问题

它没有响应:尝试缩小页面，内容将显示在两列中

Answer 1

你没有给第二个页面标题 margin-top 的 auto，就像你对 .title 所做的那样。

.instructions {
    margin-top: auto;
}