Элементы страницы заголовка вертикального выравнивания

Question

У меня есть тег заголовка, который имеет полное изображение ширины/высоты на фоне.

Мне нужно, чтобы элементы альгина были в центре этой страницы, как показано на рисунке.

Сначала идет изображение, чем текст, чем кнопки один за другой и на самой нижней части страницы слайдер

кроме слайдера, я сумел поместить все содержимое в центр с кодом ниже

Кроме того, я использую boostrap и JQuery при необходимости

это одна страница дизайн, это просто заголовок

Спасибо за любую помощь :)

<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

Вы можете достичь этого, используя следующие свойства в соответствующих местах.

text-align:center; 
display:flex; 
align-center; 
margin:0 auto; 

Кроме того, как ваш, используя загрузчике некоторые классы могут получить перезаписаны поэтому убедитесь, что использовать !important на свойства, которые вы хотите, чтобы заставить ваши настройки на.

Использование кода я сделал некоторые изменения, используя указанные выше предложения и вот код:

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

Вот пример использования этого кода. http://codepen.io/Nasir_T/pen/PboZme