将元素中的内容居中，并将导航栏锁定在底部（使用 flexbox？如何？）

Question

我正在尝试设置一个登陆欢迎页面，该页面将填充用户浏览器的整个视口。我希望在其上方有一些居中的内容，可能是一些文本或某种幻灯片。我以前将内容居中，这不是真正的问题。我还需要将导航栏固定到元素的底部。我不能使用绝对定位，因为当我滚动过去时我需要它贴在窗口顶部。我试过用 flexbox 来做这件事，但遇到了很多问题。首先是导航栏是从中间开始的，其次是居中的内容不在中间，它似乎稍微偏右。

这是我正在使用的 css：

html, body {
    width: 100%;
    height: 100%;
}

.navbar {
    margin-bottom: 0;
    width: 100vw;
}

.full-size {
    height: 100vh;
}

#page-welcome {
    background: url(http://placekitten.com/1920/1080);
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.align {
    display: flex;
    justify-content:center;
    align-items: center;
    height:100%;
}
.align > .end{
    align-self:flex-end;
}
.align > .top{
    align-self:flex-start;
}

我还有一个 CodePen 可以在这里演示我的问题： http://codepen.io/anon/pen/GCpzE

Answer 1

默认情况下，方向设置为行，但你需要的是列。

http://codepen.io/cimmanon/pen/bCDfL

html, body {
  width: 100%;
  height: 100%;
}

.navbar {
  margin-bottom: 0;
  width: 100vw;
}

.full-size {
  height: 100%;
  height: 100vh;
}

#page-welcome {
  background: url(http://placekitten.com/1920/1080);
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}

.align {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
}

我在演示中添加了一个额外的元素，以便您可以看到它将垂直居中（尽管它与完美居中的接近程度取决于其他元素的高度）。