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

The SOLID/STUPID principles

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

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

Tutorial Top post !

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

Create an Ansible playground with Docker

Let's create an Ansible playground with Docker

Database ACID/BASE - Understanding the CAP Theorem

Technological watch Tutorial

Learn what is the CAP Theorem in less than 5 minutes !

HashiCorp Vault - Technological watch

Technological watch Tutorial Top post !

Learn what is HashiCorp Vault in less than 5 minutes !

How to internationalize an AstroJS website while maintaining good SEO ?

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

Remember all the commands of a project with Makefile

We will see how to remember all command of a project & write documentation with Makefile !