The Ultimate Guide to Center Align - CSS

This blog will discuss 6 techniques (in order of adherence to best practices)that can be used to center align an element and when to use each one. Here, center align refers to placing the element at the horizontal and vertical center of its parent.

.center class represents the element to be center aligned
.parent represents its parent element.

1. Using Transform

When to use:

• When the width and height of the element are not known
• Card like modals where there are multiple child elements with one focussed element at the center.

The idea is to use absolute positioning with top and left - 50% and then applying negative transform. The value used in top and left are resolved based on dimensions of the parent while the value in the translate method is resolved based on the dimensions of the element itself.

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

2. Using Flex

When to use:

• When there is one or more elements to be centered.
• When the child elements are dynamic and their sizes are not known.
• When there are a row of items that need to be centered like in a footer

The idea is to make the parent container a flexbox and center the element along the horizontal and vertical directions using flex properties as follows.

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

When there are multiple elements that need to be stacked one above the other such that the stack is at the center, we simply add the following line:

flex-direction: column;

3. Using Negative Margin

When to use:

• When the height and width of the element are known.

The idea is to again use absolute positioning similar to the transform technique but we apply a negative margin of half the element's width and height instead of translate.

$w: 200px; // SCSS Variable
$h: 100px; // SCSS Variable
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; // Negative margin of half the 
                        //  width and height

}

To make this code more generic, we use the calc() property as follows:

(#{$h} / 2) - Half the height
(#{$h} / 2) * -1) - Negated value of half the height
Which gives us:

margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);

4. Using Grid

I recently discovered this cool technique from css-tricks.com

When to use:

• When there is only one child element that needs to be centered.

The idea is to create a grid container and set the margin to auto. In a non-grid container, when margin is set to auto, margin-top and bottom take the value 0.

However, in a grid container, margin-top and bottom is assigned the available space evenly, thus centering the element.

.parent {
  display: grid;
}
.center {
  margin: auto;
}

Another way to center using grid, pointed out by Jacob:

.parent {
  display: grid;
  place-items: center;
}

5. Using Padding

This technique is not recommended for center-align but it works.

When to use:

• When the height of the parent element is known/fixed.
• When the height of the center element is flexible.

The idea is to set a fixed vertical padding for the container with fixed height is known and allow the child element to occupy max height and margin auto.

.parent {
  height: 600px; //Fixed height
  padding: 200px 0; //Fixed vertical padding
}
.center{
  margin: 0 auto;
  height: 100%; // Child takes max height
}

6. Using Table-cell

This technique is very rarely used today and may raise eyebrows. However, it does work.

The idea is to force the parent to behave like a table cell using display. We then use vertical align property for vertical centering and margin auto for horizontal centering.

.parent {
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin: auto;
}

This concludes the 6 ways to center align elements.

Bonus - Horizontal Centering

Horizontal centering is often used in title styles and footers in combination with an even padding or margin.

Using text-align

When to use:

• When the center element is text content / inline-* type element
• Inline-* includes inline, inline-block, inline-flex, inline-table etc.

.parent {
   text-align: center;
}

It can also center block type child elements but it is not a recommended practice.

Using margin

When to use:

• When the center element is a block element

.center {
    margin: 0 auto;
}

Here is a working Codepen demo of all the above techniques.

Let me know in the comments if there are any more techniques that you have used/explored. Also, follow me on Twitter for more dev content!