How to Vertically Center a Container within a Bootstrap Jumbotron?

Vertical Alignment of Container within a Jumbotron in Bootstrap

Achieving vertical alignment of a container within a jumbotron in Bootstrap can be achieved through various approaches, depending on the level of browser support desired.

The Modern Way

Using Flexbox

For modern browsers that support Flexbox, a more straightforward and consistent approach is to use the Flexbox layout model. By adding the following CSS to your page:

.vertical-center {
  display: flex;
  align-items: center;
}

you can effortlessly vertically center the container within the jumbotron. Ensure you surround the container with a div with the class ".vertical-center".

The Old-Fashioned Way

For Older Browsers

For browsers that lack Flexbox support, a web-standard technique involving vertical alignment necessitates a bit more effort. Utilize the text-align: center property to align child elements horizontally within the parent. Create a div element initially hidden by display: none with a height equal to or less than the parent. Now, manipulate alignment using vertical-align on the desired element (like the container).

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

Within the container, add a display: inline-block; property along with vertical-align: middle; to achieve vertical centering. Note that this involves some extra markup to mimic the effect of Flexbox.

Browser Considerations

Remember that Internet Explorer 8 and 9 won't correctly interpret the inline-block technique, requiring alternative solutions.

The above is the detailed content of How to Vertically Center a Container within a Bootstrap Jumbotron?. For more information, please follow other related articles on the PHP Chinese website!