How can you center an element horizontally and vertically using CSS?

To center an element both horizontally and vertically, I recommend using the Flexbox model. It’s a straightforward and reliable method. Here’s how you can do it:

First, you set the display property of the container element to flex. This enables Flexbox for that container. Then, to handle the horizontal centering, you use justify-content: center;. For vertical centering, align-items: center; is the property to use. These properties ensure that the child element is perfectly centered inside the flex container.

If you want the container to take up the entire viewport height, you can also set its height to 100vh. This is particularly useful for layouts where you need the content to be centered on the entire screen.

Here’s a quick example of what the CSS would look like:

1
2
3
4
5
6

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

And for the HTML, it’s just a matter of having a container div around the element you want to center:

1
2
3

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

This method is both effective and widely supported across modern browsers, making it a go-to solution for centering elements."