CSS付き垂直アラインブートストラップパネル

Question

ここでは、私を除いてほとんどの人に修正を提供するような記事がいくつかあります。

私は私のwebsite上で、次のCSSを使用していないしています：

/* login page background */ 

body.function-login { 
display:inline-block; 
float:none; 
vertical-align:middle; 
height:100%; 
background:transparent url("http://sheqcomply.com/loginbackground.jpg") no-repeat center center fixed; 
background-size:contain; 
} 

をどんなに私はちょうど垂直ページ内に整列するログインボックスを取得することはできませんしてみてくださいどのような。私は必要に応じてレイアウトCSSとページHTMLを提供することができますが、彼らが大きいので、この投稿内にそれを含めません。

これは私が垂直なものを揃えなければならないとき、私は頻繁に使用するものです

Answer 1

事前にこの

のおかげで現在のコードの結果、私は上から50％に要素を配置し、それを翻訳します-50％である。それもあなたのために働くはずですが、それはあなたがそこに持っている他のCSSの指示にも依存します。

.function-login { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 2

縦型アライメント、多年生のお気に入りです。

これを達成する1つの方法は、コンポーネントの周りに別のdivを置くことです。あなたの例では、col-md-6 col-md-offset-3のcontainerの子になります。このためには、height: 100vhスタイルを追加する必要があります。あなたの実際のコンポーネントのdivのためにあなたがして次のスタイル

position: relative; 
top: 50%; 
transform: translateY(-50%); 

を追加があり、あなたのコンテキストのための「正しい」アライメントを得るために行う必要があり、ほとんどの微調整は、おそらくですが、これはそれを行う必要があります。