How to center a <div> in CSS ?

Let's discover together three 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

Understanding SSH and setting up SSH keys

In this article, we’ll see what is SSH, and generate and configure SSH keys for secure authentication

Understanding XSS vulnerabilities

In this article, we will explore how XSS vulnerabilities work and how to prevent them

Understanding CSRF vulnerabilities

In this article, we will explore how CSRF vulnerabilities work and how to prevent them

Understanding SQL injection vulnerabilities

In this article, we will explore how SQL injection vulnerabilities work and how to prevent them

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