How to vertically center a container in Bootstrap?
Update 2021
Bootstrap 5 still use flexbox, so the methods of vertical centering are the same as Bootstrap 4...
Bootstrap 4 use flexbox, so the method of vertical centering is much easier and doesn't require extra CSS.
Just use the d-flex
and align-items-center
utility classes..
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
http://codeply.com/go/ui6ABmMTLv
Important: Vertical centering is relative to height. The parent container of the items you're attempting to center must have a defined height. If you want the height of the page use vh-100
or min-vh-100
on the parent! For example:
<div class="jumbotron d-flex align-items-center min-vh-100">
<div class="container text-center">
I am centered vertically
</div>
</div>
Also see: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4
add Bootstrap.css then add this to your css
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Now call in your page
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
The Flexible box way
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
ormin-height
properties is relative to theheight
of the parent element, therefore you should specify theheight
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 thewidth
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/rightmargin
ofauto
doesn't have any effect on the flex item.
Therefore we need to align it bybox-pack / justify-content
.
For further details and/or vertical alignment of columns, you could refer to the topic below:
- vertical-align with Bootstrap 3
The traditional way for legacy web browsers
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.
Getting all together
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;
}
WORKING DEMO.
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;
}
}
UPDATED DEMO
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.