Centering content in an element, and also locking a navbar to the bottom (Use a flexbox?How?)

Question

I'm trying to set up a landing welcome page that will fill the entire viewport of the users browser.Id like to have some centered content above it, maybe some text or a slideshow of some sort. I've centered content before, that's not the real issue here. I also need to pin a navbar to the bottom of the element. I cant use absolute positioning because i need it to stick to the top of the window when i scroll past it. I've tried doing this with a flexbox, but have run into a large number of issues. First is that the navbar is starting from the middle and second is that centered content is not quite in the middle, it appears to be slightly to the right of the center.

Here's the css i'm using:

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;
}

I also have a CodePen that demonstrates my problems here: http://codepen.io/anon/pen/GCpzE

Answer 1

By default, the direction is set to row, but what you need is column.

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%;
}

I've added an extra element to the demo so that you can see that it will be vertically centered (though how close to perfectly centered it is will depend on how tall the other elements are).