How to center a <div> in CSS ?

Let's discover together tree ways to center a div in HTML/CSS !

Thursday, December 23, 2021

Use the “absolute position” trick
Use the “flexbox” trick
Use the “grid” trick

Hi ! Here I will show you three ways to center a div in HTML and CSS !

This text is horizontally and vertically centered 😌

Use the “absolute position” trick

Note: this technique works on (very) old browers like Internet Explorer:

<style>
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
</style>

<article>
  <p>Center</p>
</article>

Use the “flexbox” trick

On modern browsers, you can use Flexbox like this:

<style>
  article {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
</style>

<article>
  <p>Center</p>
</article>

Use the “grid” trick

On modern browsers, you can use Grid like this too:

<style>
  article {
    display: grid;
    place-items: center;
    height: 100vh;
  }
</style>

<article>
  <p>Center</p>
</article>

🎉: Tada !

Recommended articles

Practice code with the "Quick Sort" algorithm

Enhance your coding skills by learning how the Quick Sort algorithm works!

The SOLID/STUPID principles

Tutorial Top post!

Learn what are the SOLID and STUPID principles with examples

Create a Docker Swarm playground

Let's create Docker Swarm playground on your local machine

Create an Ansible playground with Docker

Let's create an Ansible playground with Docker

HashiCorp Vault - Technological watch

Technological watch Tutorial Top post!

Learn what is HashiCorp Vault in less than 5 minutes !

Setup a Kubernetes cluster with K3S, Traefik, CertManager and Kubernetes Dashboard

Tutorial Top post!

Let's setup step by step our own K3S cluster !

How to internationalize an AstroJS website while maintaining good SEO ?

We will see how to create an implementation of i18n with AstroJS

LFTP - Deploy an application in command line

Here we will see how to automatically deploy an application with lftp in command line.