Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we'd need to use some hacks/polyfills or different approaches for IE8/9.
In the following I'll show you how to do that in only 3 lines of text (regardless of old flexbox syntax).
Note: it's better to use an additional class instead of altering .jumbotron
to achieve the vertical alignment. I'd use vertical-center
class name for instance.
Example Here (A Mirror on jsbin).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Important notes (Considered in the demo):
A percentage values of height
or min-height
properties is relative to the height
of the parent element, therefore you should specify the height
of the parent explicitly.
Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example.
In some of old web browsers such as Firefox 9 (in which I've tested), the flex container - .vertical-center
in this case - won't take the available space inside the parent, therefore we need to specify the width
property like: width: 100%
.
Also in some of web browsers as mentioned above, the flex item - .container
in this case - may not appear at the center horizontally. It seems the applied left/right margin
of auto
doesn't have any effect on the flex item.
Therefore we need to align it by box-pack / justify-content
.
For further details and/or vertical alignment of columns, you could refer to the topic below:
This is the old answer I wrote at the time I answered this question. This method has been discussed here and it's supposed to work in Internet Explorer 8 and 9 as well. I'll explain it in short:
In inline flow, an inline level element can be aligned vertically to the middle by vertical-align: middle
declaration. Spec from W3C:
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
In cases that the parent - .vertical-center
element in this case - has an explicit height
, by any chance if we could have a child element having the exact same height
of the parent, we would be able to move the baseline of the parent to the midpoint of the full-height child and surprisingly make our desired in-flow child - the .container
- aligned to the center vertically.
That being said, we could create a full-height element within the .vertical-center
by ::before
or ::after
pseudo elements and also change the default display
type of it and the other child, the .container
to inline-block
.
Then use vertical-align: middle;
to align the inline elements vertically.
Here you go:
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Also, to prevent unexpected issues in extra small screens, you can reset the height of the pseudo-element to auto
or 0
or change its display
type to none
if needed so:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
And one more thing:
If there are footer
/header
sections around the container, it's better to position that elements properly (relative
, absolute
? up to you.) and add a higher z-index
value (for assurance) to keep them always on the top of the others.