How to Center Things in CSS

Centering things in CSS is one of those skills that every web developer should have in their toolkit, because it’s so handy when it comes to good site design. Luckily there are many different ways to center things with CSS. I’m here to show you a few of my most used tricks.

The Text Align Method

This method uses the text-align property, which is really meant to align text but it actually works with non-text elements as well. You need to put it on the parent element of the element you want to center.

In the example below, the child-element will be centered horizontally within the parent-element. The text-align property cannot be used to vertically center elements (but I’ll show you what you can use for that later in this post!).

.parent-element { 
  text-align: center; 
}

The one caveat to this method is that it makes every descendant element within that one center-aligned, including text. So if you don’t want your text (or other elements like ) to be center-aligned, so you’d have to reset things if you don’t want your text centered:

// this is the element that is centered
.child-element {
  text-align: left;
}

I usually end up using this method if I have an or inside the parent element that I want centered.

The Margin Method

This method only works on elements that are block elements that have a set width. It’s also for horizontal centering and requires setting both left and right margins of an element to auto.

A value of auto means that the browser automatically gives it the largest possible size, so if both the left and right margins are auto, the element will be centered (since the largest amount of space is whatever empty space left over once the element’s width has been set, and then divided equally between the left and right).

element {
  margin: 0 auto;
}

The Flexbox Method

Before flexbox came out, there were limited ways to create layouts for websites. Flexbox brought a lot of methods for positioning and aligning content, including a couple very easy tricks for both horizontal and vertical center-alignment.

To use flexbox, we need to set the display property of the parent element to display: flex. The element that will be centered is the child element.

For horizontal alignment in flexbox, we use the justify-content property which goes on the parent element:

.parent-element {
  display: flex;
  justify-content: center;
}

For vertical alignment, we use the align-items property:

.parent-element {
  display: flex;
  align-items: center;
}

The great thing is, we can combine these two to center an element both vertically and horizontally within its parent element:

.parent-element {
  display: flex;
  justify-content: center;
  align-items: center;
}

The Transform & Translate Method

This is one of my favourite centering tricks. We use the position property with the transform property. The parent element needs to have position: relative on it, because the centered element will be centered in relation to it, while the centered element itself should be position: absolute.

By using a non-static position on the child element, we can access the top, bottom, left, and right properties, which we use to set the element at a position we want. Then, we use the transform property and and translate value to shift the child element into place.

This is how you would center something horizontally:

.parent-element {
  position: relative;
}

// element to be centered
.child-element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

The left property refers to the amount the child element is moved in relation to the boundaries of the parent element. 50% refers to half of the width of the parent element, so left: 50% means the child element has a left margin of 50% of the width of its parent element, meaning its left boundary is now lined up with the halfway point of the parent element.

Transform works on the child element itself, and the percentage amount refers to the element. translateX means that we are moving its position along the X-axis and the percentage refers to its own width. So we are moving the child element across the X-axis by 50% of its own width. It is -50% so we move it towards the left.

Here is how you can do vertical centering with the same method:

.parent-element {
  position: relative;
}

// element to be centered
.child-element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

The top property refers to the amount the child element is moved in relation to the top of the parent element. By using top: 50%, the child element is being moved down by half of the height of the parent element. Then transform: translateY allows us to move the element along the Y-axis, by 50% of its own height, and it’s -50% meaning it moves up, instead of down. Now it is vertically centered.

You can combine the two above to center something both vertically and horizontally:

element {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Here, we simply use translate with 2 arguments, the first number representing the X-axis and the second number representing the Y-axis.

And there you go, four methods for centering things in CSS!


[Originally published on the now-defunct Ctrl+Alt+Del blog on April 17, 2020.]