How to Horizontally Center an Element in CSS (4 Ways)

Let’s Try Centering This Doggo. Source: Jamie Street

Struggling to center an image, div or embedded container in CSS 😫?

Here are three quick fixes you can try out, all through examples in centering this cute doggo 🐕

1- Using TextAlign ➖

This is by far the simplest way to horizontally-align an element in CSS, but it may not work in all use cases. Therefore, while this should be your first attempt, make sure to try out different options if this doesn’t end up working.

Here’s what you’ll need:

text-align:center;

IMPORTANT 🚨: This code should not be on the div you want centered, but on the larger div that contains it.

2- Using TextTransform 👾