How to Center a Div in Bootstrap 5 — Every Method

Centering things in CSS has a long history of being unnecessarily complicated. Bootstrap 5 makes it much simpler with flexbox utilities.

Here's every centering scenario you'll encounter.

Center Horizontally with mx-auto

The simplest case — center a block element with a known width:

<div class="container">
  <div class="col-6 mx-auto">
    <div class="card">
      <div class="card-body">Centered card</div>
    </div>
  </div>
</div>

mx-auto sets margin-left: auto and margin-right: auto. The element must have a defined width — Bootstrap column classes provide that.

Center with Flexbox

To center items inside a container:

<div class="d-flex justify-content-center">
  <div>Centered horizontally</div>
</div>

<div class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
  <div>Centered both ways</div>
</div>

justify-content-center handles horizontal. align-items-center handles vertical. Both together centers in both axes.

Center a Login Form in the Viewport

This is one of the most common use cases:

<div class="min-vh-100 d-flex align-items-center justify-content-center">
  <div class="card" style="width: 400px; max-width: 100%;">
    <div class="card-body p-4">
      <h4 class="fw-bold text-center mb-4">Sign In</h4>
      <!-- form content -->
    </div>
  </div>
</div>

min-vh-100 makes the container at least full viewport height. Then flexbox centers the card inside it. Works perfectly for login pages.

Center Text

<p class="text-center">Centered text</p>
<h1 class="text-center">Centered heading</h1>

<!-- Responsive — left on mobile, center on desktop -->
<p class="text-start text-md-center">Centers from md up</p>

Center in a Grid Column

<div class="row">
  <div class="col-md-6 offset-md-3">
    <!-- This column is centered — 6 wide, offset 3 on each side -->
    <p>Centered column content</p>
  </div>
</div>

<!-- Alternative using mx-auto -->
<div class="row">
  <div class="col-md-6 mx-auto">
    <p>Also centered</p>
  </div>
</div>

Both approaches work. offset-md-3 is more explicit. mx-auto is shorter.

Center an Image

<!-- Block image centered with d-block mx-auto -->
<img src="logo.png" alt="Logo" class="d-block mx-auto">

<!-- Image inside a centered flex container -->
<div class="d-flex justify-content-center">
  <img src="logo.png" alt="Logo">
</div>

img elements are inline by default so mx-auto alone won't work — you need d-block to make it a block element first.

Center a Bootstrap Modal

Bootstrap modals center horizontally by default. For vertical centering:

<div class="modal-dialog modal-dialog-centered">
  <!-- modal content -->
</div>

One class. Done.

Center an Absolutely Positioned Element

For things like badges, overlays or tooltips positioned absolute:

<div class="position-relative" style="height: 200px;">
  <!-- Centered both ways using translate-middle -->
  <div class="position-absolute top-50 start-50 translate-middle">
    Centered
  </div>
</div>

top-50 start-50 moves the element's top-left corner to center. translate-middle shifts it back by 50% of its own size to truly center it.

This is also how Bootstrap centers notification badges:

<button class="btn btn-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    4
  </span>
</button>

Quick Reference