Flexbox Bootstrap sınıfları olan dikey ve yatay merkez

Question

Giriş ekranımı dikey olarak hizalamaya çalışıyorum. Here is my code in JS Fiddle benim öğeleri dikey merkezli almıyorum css

.flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center;. 
    align-items: center; 
} 

kullanılmış ve. Önyükleme sınıfını yatay merkeze kullandığım için bunu başaramayacağım. Eğer div ve 's konteyner% 100 yükseklik kurarsın yatay hem de dikey hem ortalar

Answer 1

:

html, 
body, 
.fluid-container { 
    height: 100%; 
} 

.flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
    height: 100%; 
} 

Demo

Diğer bir seçenek (for modern browsers) vh viewport ünitesini kullanarak tam yüksekliğini ayarlamaktır :

.flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
    height: 100vh; 
} 

Demo 2