How to Vertically Center a Container Using Bootstrap and Other Methods?

How to Vertically Center a Container in Bootstrap?

Vertical Alignment with Flexible Box

Flexible box layout offers a straightforward solution for vertical alignment. It is widely supported by modern web browsers, except for Internet Explorer 8 and 9.

Create a class called .vertical-center and add it to the .jumbotron div.

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Traditional Method for Legacy Web Browsers

For legacy browsers like Internet Explorer 8 and 9, we can use pseudo-elements and vertical alignment.

.vertical-center {
  height:100%;
  width:100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Considerations

• Inline elements are vertically aligned to the parent's baseline plus half the x-height of the parent.
• To center an inline element vertically, its height must be set to match the parent's height.
• Pseudo-elements can be used to create a full-height inline block element to achieve vertical alignment.
• Reset font properties to avoid gaps between inline elements.
• Consider positioning and z-index for elements around the container for proper arrangement.

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