Vertical align header page elements - html

Question

I have header tag, which has full width/height image on the background.
I need to algin elements in the center of that page exactly as picture shows.
First goes image, than text, than buttons one after another one and on the very bottom of the page is slider
apart from slider, I've managed to put all content to the center with code below
Also, I'm using boostrap and jquery if needed
It's one page design, this is just a header
Thank you for any help :)
<header>
<img src="" alt="full">
<h1>The</h1>
Login
Browse
<div class="swiper-container">
</div>
</header>
SCSS
header {
margin-top: -56px !important;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
img {
margin-top: 5%;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
}
.btn {
#include Myriad-Pro-Light;
}
.btn-green {
margin-top: 5%;
color: #fff;
}
.btn-grey {
color: #000;
}
.swiper-container {
margin-top: 5%;
width: 100%;
height: 300px;
}
}

Answer 1

You can achieve this by using the following properties at the appropriate places.
text-align:center;
display:flex;
align-center;
margin:0 auto;
Also as your using bootstrap so some of the classes may get overwritten so make sure to use !important on properties that you want to force your setting on.
Using your code i have made some changes using the above mentioned suggestions and here is the code:
<header>
<img src="http://placehold.it/350x150" alt="full">
<h1>The</h1>
Login
Browse
<div class="swiper-container">
<p>Large full width div, which must stay on the bottom of the header tag</p>
</div>
</header>
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
min-width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
img {
margin: 0 auto;
display: block;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
text-align:center;
}
.btn {
#include Myriad-Pro-Light !important;
margin: 10px auto !important;
display: block !important;
width: 25vw !important;
text-align:center !important;
padding: 6px 0px !important;
}
.btn-green {
color: #fff;
display:block;
}
.btn-grey {
color: #000;
display:block;
}
.swiper-container {
background-color:red;
width: 100%;
height: 300px;
position:absolute;
bottom:0;
display: flex;
align-items: center;
justify-content: center
}
.swiper-container p{
#include Myriad-Pro-Light !important;
margin:0 auto;
color:white;
font-size: 18px;
}
Here is a sample using this code. http://codepen.io/Nasir_T/pen/PboZme