4 ways to center block elements in CSS

clock 1 min. read

Front-end developers quite often encounter the task of centering block elements in CSS (verticaly and horizontaly). In this article, I’d like to share the most popular ways that I personally use all the time.

1. Using transform property

Make use of position and transform properties.

  <div class="container">
    <div class="child">Child</div>
  </div>
.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Using flexbox

Just define the parent container as an flexbox and it will do the job for you.

  <div class="container">
    <div class="child">Child</div>
  </div>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

3. Using grid

This method works the same way as flexbox.

  <div class="container">
    <div class="child">Child</div>
  </div>
.container {
  display: grid;
  align-items: center;
  justify-items: center;
}

4. Using tables

This method is quite tricky, but it does the job. So far, only one parent container has been used in HTML. But now we need one more container for the child.

  <div class="container">
    <div class="inner-container">
        <div class="child">Child</div>
    </div>
  </div>
.container {
  display: table;
}
.inner-container {
  display: table-cell;
  vertical-align: middle;
}
.child {
  margin: auto;
}

That’s it :)