center a div in bootstrap

How to center a div in bootstrap 5? (Vertically and horizontally)

In Bootstrap 5, aligning content to the center of the DIV is as simple as converting the DIV into a flexbox with the d-flex class property and then using the align-items-center property to align the content in the middle of the DIV vertically.

Let’s take a look at how easy it is to vertically align information within a DIV.

Here’s a DIV with some example content in my bootstrap 5.

<div class="bg-info text-white" style="height:200px">
      <h1>This is an example content</h1>
 </div>

Align and Center content horizontally 

The bootstrap class justify-content-center with d-flex makes the content in the center horizontally.

<div class="d-flex justify-content-center bg-success" style="height:200px">
       <h1>This is an example content</h1>
 </div>

Align and Center content vertically 

To align content vertically in the center of the div, we’ll use the Bootstrap 5 flexbox class align-items-center.

<div class="d-flex align-items-center bg-success" style="height:200px">
        <h1>This is an example content</h1>
  </div>

Center a DIV – Vertically and Horizontally

We will use the Bootstrap 5 flexbox property justify-content-center to align content horizontally in the center of the div.

The class align-items-center makes the content vertically centered.

<div class="d-flex align-items-center justify-content-center bg-success" style="height:200px">
       <h1>This is an example content</h1>
 </div>

With a complete set of responsive flexbox classes, you can quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more.