Vertical align jumbotron - css

Question

I would like to vertical align my jumbotron on the screen when the user navigates to it no matter what the screen size, I would then like to be able to scroll down and it not move with the screen
I would like to use inline styles if possible
<div class="jumbotron text-center">
<h1>Search Form Here</h1>
</div>

Answer 1

You can do this without jQuery. First put the jumbotron in a wrapper:
<div class="wrapper">
<div class="jumbotron text-center">
<h1>Search Form Here</h1>
</div>
</div>
Then make the wrapper the full height of the viewport using vh units:
.wrapper {
position: relative;
height: 100vh;
}
Finally, use absolute positioning and transforms to center the jumbotron:
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can make the jumbotron and height and width you want, and it will always be centered in the container. All of these styles could be inline, just move them to style attributes on their respective DIVs. The values never need to change.

Answer 2

I solved this issue using CSS Flexbox. No Javascript or jQuery.
Here's my code, I added the class vertical-center and then in the CSS file -
.vertical-center {
min-height: 100%;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can see an example of this at - http://codepen.io/jjmax/full/avdVBE

Answer 3

You could use jQuery for this which, incidentally, creates inline CSS.
Your HTML plus a containing div:
<div class="wrapper">
<div class="jumbotron text-center">
<h1>Search Form Here</h1>
</div>
</div>
A jQuery function:
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'
});
}
Call function on document ready:
$(document).ready(function() {
myJumbotron();
});