A Comprehensive Guide to Centering with CSS

Having to center something using CSS is a very common problem. One that, I will readily admit to having to Google from time to time ( I always get justify-content and align-items confused). The good news is that centering has gotten much much easier with the wide-adoption of Flexbox and CSS Grid. This guide will go through all the common ways to center elements both horizontally and vertically.

Horizontal Centering

Inline Elements (text, links, ...etc)

You can center inline elements using the text-align: center property. Note that the parent must be a block-level element

Block Elements

There are several ways to center block-level elements

1. Margin-auto: This method uses margin: 0 auto; which is shorthand for margin-left: auto, margin-right: auto;
2. Flexbox: Enter our first modern CSS property. Flexbox makes centering an element easy.

1.parent {
2  display: flex;
3  justify-content: center;
4}

3. CSS Grid shares many of the same positioning properties as Flexbox. In this case the code required to horizontally center a block-level child is practically the same.

1.parent {
2  display: grid;
3  justify-content: center;
4}

4. Using CSS Position property (oldie): This is an older technique that relies on a combination of the position and transform/translate properties to center elements. If the width is known you can also set the transform property to a set amount of pixels. However, this is less robust and will break if the width of the element changes.

1.parent {
2  position: relative;
3  // this is needed to contain the absolute positioning of the child element
4}
5
6.child {
7  position: absolute;
8  // moves the leftmost edge of the element 50% from the left side of the parent.
9  left: 50%;
10  // moves the element left 50% of its total width to center it
11  transform: translateX(-50%);
12}

Vertical Centering

Historically, vertical centering an element was the 'difficult' thing to do. Again, this is now easy with Flexbox or CSS Grid.

Block Elements

There are several ways to center block-level elements

1. Flexbox: Again, flexbox makes vertically centering an element easy.

1.parent {
2  display: flex;
3  align-items: center;
4}

2. CSS Grid: As seen above, CSS grid shares the basic approach as Flexbox.

1.parent {
2  display: grid;
3  align-items: center;
4}

3. Using CSS Position property: The same approach can also be used to center an element vertically with a couple alterations.

1.parent {
2  position: relative;
3}
4
5.child {
6  position: absolute;
7  top: 50%;
8  transform: translateY(-50%);
9}

Inline Elements

This is quite useful when you need to center text with an inline svg icon or vice-versa.

Text: This approach takes advantage of the magic of margin:auto.

1.textElement {
2  line-height: 100%;
3  margin: auto;
4}

SVG or similar: Note that the property you use will depend on the height on the parent and how exactly you want your svg/icon aligned.

1.svg {
2  .vertical-align: middle;
3}

Both Horizontal and Vertical Centering

1. Flexbox: as you are no doubt aware by now... flexbox makes this task easy.

1.parent {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

2. CSS Grid: As seen above, CSS grid shares the same approach as Flexbox.

1.parent {
2  display: grid;
3  justify-content: center;
4  align-items: center;
5}

3. Using CSS Position property: To center in both axises we need to combine the X-axis and Y-axis transforms. Variations of this technique are also super useful to properly place fixed or absolutely positioned elements.

1.parent {
2  position: relative;
3}
4
5.child {
6  position: absolute;
7  top: 50%;
8  left: 50%;
9  transform: translate(-50%, -50%);
10}

This technique can also be used with negative margins instead of the transform. Using negative margins requires you to know the exact dimensions of the element as you will need to set the margins to exactly 50% of the height and width, respectively.

1.parent {
2  position: relative;
3}
4
5.child {
6  height: 100px;
7  width: 300px;
8  padding: 20px;
9  position: absolute;
10  top: 50%;
11  left: 50%;
12  margin-top: -70px;
13  margin-left: -160px;
14}

Find a mistake? Help me fix it by submitting a pull request.