How to center a div with css

Posted on: 10-2-2024

How to center a div with flexbox

There are different ways of centering a div with css. One of the easiest ways is to make the parent container a flex container. Then use the properties justify-content and align-items to center the children within this container.

<div class="flex-container">
  <div>some content</div>
</div>

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

How to center a div with css-grid

Another way of centering a div is by using css-grid. Now you have to give the parent container a display of grid. Then use the property place-content to center the children of this container.

<div class="grid-container">
  <div>some content</div>
</div>

.grid-container {
  display: grid;
  place-content: center;
  min-height: 30vh;
}