垂直对齐的超大屏幕

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