垂直对齐标题页元素

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>
        <a href="" class="btn btn-default btn-green" role="button">Login</a>
        <a href="" class="btn btn-default btn-grey" role="button">Browse</a>
        <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>
    <a href="" class="btn btn-default btn-green" role="button">Login</a>
    <a href="" class="btn btn-default btn-grey" role="button">Browse</a>
    <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