How to Center a Div in Bootstrap (Every Way)

“How do I center a div” is the most-asked CSS question, and Bootstrap answers it with utility classes so you almost never write custom CSS. The catch is that “center” can mean horizontally, vertically, or both, and each needs a slightly different class. This guide covers every case, with the one-liner for each and a decision table at the end.

The fastest answer

To center a child both horizontally and vertically, make the parent a flex container and center on both axes. Give the parent a height so there is room to center into:

<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
  <div>Perfectly centered</div>
</div>

justify-content-center handles the horizontal axis and align-items-center handles the vertical axis. That single pattern solves the majority of centering needs. The rest of this guide is the specific cases.

Center horizontally

There are three common ways, depending on what you are centering.

A block element with a width: mx-auto

mx-auto sets left and right margins to auto, which centers a block element that has a width:

<div class="mx-auto" style="width: 300px;">Centered block</div>

This is the classic margin-auto trick, as a utility. It only works when the element has a width and is a block; a full-width block has nothing to center. The m and x come from Bootstrap’s spacing utilities.

Text or inline content: text-center

To center text or inline elements, use text-center on the parent:

<div class="text-center">Centered text and inline elements</div>

Flex children: justify-content-center

If the parent is a flex container (d-flex), center its children horizontally with justify-content-center:

<div class="d-flex justify-content-center">
  <button class="btn btn-primary">Centered button</button>
</div>

Center vertically

Vertical centering almost always uses flexbox, because it needs a container with height.

Flex children: align-items-center

<div class="d-flex align-items-center" style="height: 200px;">
  <div>Vertically centered</div>
</div>

align-items-center centers all children on the cross axis. To center just one child differently, use align-self-center on that child.

A single flex child: my-auto

Inside a flex container, my-auto pushes a child to the vertical center by taking up the leftover space as margin:

<div class="d-flex" style="height: 200px;">
  <div class="my-auto">Vertically centered</div>
</div>

Center both, horizontally and vertically

Combine the two flex axes. This is the pattern from the top of the guide:

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="p-4 border rounded">Centered both ways</div>
</div>

Use height: 100vh to center within the full viewport (a common hero or login layout), or any fixed height for a section. Without a height, there is no vertical space to center into, which is the number-one reason vertical centering “does not work.”

Center with the grid

Inside Bootstrap’s grid, center a column horizontally with justify-content-center on the row, using an auto-width or sized column:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">Centered column</div>
  </div>
</div>

For full-page centering with the grid, add align-items-center and a height to the row, or use min-vh-100 on the container.

Which class should I use?

These are all flexbox utilities except mx-auto and text-center, so the flexbox guide is the natural next read.

Common gotchas

• Vertical centering does nothing. The container has no height. Add one (100vh, a fixed value, or min-vh-100).
• mx-auto does nothing. The element has no width, or is not a block. Give it a width.
• Everything is centered, not just one item. align-items-center and justify-content-center affect all flex children. Use align-self-center or ms-auto/me-auto to move a single item.

See it live

Centering is easier to feel than to read about. Open the bootstrap.build editor, drop these classes onto an element, and watch it move in the live preview, then copy the markup straight into your project.

FAQ

How do I center a div horizontally and vertically in Bootstrap?

Make the parent a flex container and center on both axes, with a height to center into: <div class="d-flex justify-content-center align-items-center" style="height: 300px;">. The child sits in the exact center.

How do I horizontally center a div in Bootstrap 5?

For a block element with a width, use mx-auto. For text or inline content, use text-center on the parent. For a flex container’s children, use justify-content-center.

Why is align-items-center not centering vertically?

Because the flex container has no height, so there is no vertical space to center within. Give the container a height such as style="height: 100vh;" or the min-vh-100 class.

What is the difference between justify-content-center and align-items-center?

In a default row-direction flex container, justify-content-center centers children horizontally (the main axis) and align-items-center centers them vertically (the cross axis). Use both to center on both axes.