How to center a element inside div with css

April 8, 2020 · html, css

Centering elements inside div is a common problem in web development. In this post I will explain a very easy solution for this that works always.

Before centering

Let’s say we have those 2 containers.

<div class="container">
  <div class="center-element"></div>
</div>

<style>
  .container {
    width: 300px;
    height: 300px;
    background: red;
  }

  .center-element {
    width: 200px;
    height: 200px;
    background: yellow;
  }
</style>

Centering the element

The easiest way is to use the flex display that handles the centering in very good way.

We will modify our code as following:

<style>
  .container {
    ...
    display: flex;
    justify-content: center; /* center horizontal */
    align-items: center; /* center vertical */
    ...
  }
</style>

Sources

Building something like this in production?

I help teams turn setups like this into reliable, monitored infrastructure.

Get a free consulting call

Get my monitoring stack checklist

The exact checklist I use when setting up observability for a new team. No spam, unsubscribe anytime.