垂直對齊的超大屏幕

Question

我想垂直對準我的超大屏幕，屏幕上，當用戶瀏覽到它無論什麼屏幕尺寸，然後，我會希望能夠向下滾動，它與屏幕不 我會動議喜歡使用內聯樣式如果可能的話

<div class="jumbotron text-center"> 
      <h1>Search Form Here</h1> 
     </div> 

Answer 1

您可以使用jQuery爲此，順便說一下，創建內嵌CSS。

你的HTML加上含有div：

<div class="wrapper"> 
    <div class="jumbotron text-center"> 
     <h1>Search Form Here</h1> 
    </div> 
</div> 

一個jQuery函數：

function myJumbotron() { 
    var winHeight = $(window).height(); 
    // make wrapper div whole height of window 
    $('.wrapper').css({ 
     height: winHeight 
    }); 
    // make jumbotron be in the middle vertically 
    $('.jumbotron').css({ 
     marginTop: (winHeight/2) + 'px' 
    }); 
} 

呼叫功能的文件準備：

$(document).ready(function() { 
    myJumbotron(); 
}); 

Answer 2

你可以做到這一點沒有jQuery的。首先把超大屏幕的包裝：

<div class="wrapper"> 
    <div class="jumbotron text-center"> 
     <h1>Search Form Here</h1> 
    </div> 
</div> 

然後用VH單位進行包裝視口的全高度：

.wrapper { 
    position: relative; 
    height: 100vh; 
} 

最後，使用絕對定位，並轉變爲中心的超大屏幕：

.jumbotron { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

可以使超大屏幕，並高度和寬度你想，它總是會在容器中居中。所有這些樣式都可以內聯，只需將它們移動到各自DIV的樣式屬性即可。這些值永遠不需要改變。

Answer 3

我解決了使用CSS Flexbox的這個問題。沒有Javascript或jQuery。

這裏是我的代碼，我添加了類vertical-center，然後在CSS文件 -

.vertical-center { 
    min-height: 100%; 
    min-height: 100vh; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

你可以看到在這樣一個例子 - http://codepen.io/jjmax/full/avdVBE