Easy Ways to Center an Element Using CSS Flexbox

There are a couple of ways to center a div. Here’s how we can do it using Flexbox.

Centering a Div Both Horizontally and Vertically.

HTML

<div class="container">
  <div>Element</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Centering a Div Horizontally Only

CSS

.container {
  display: flex;
  justify-content: center;
}

Further Reading