DEV Community

loading...
Cover image for The Ultimate Guide to Center Align - CSS

The Ultimate Guide to Center Align - CSS

Akshaya Venkatesh
Front End Enthusiast and Developer on most days.Mandala and Calligraphy Artist on others!
Updated on ・3 min read

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%);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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

}
Enter fullscreen mode Exit fullscreen mode

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); 
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.parent {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (8)

Collapse
mvoloskov profile image
Miloslav 🏳️‍🌈 🦋 Voloskov • Edited

It's better to ditch fixed width and height solutions as antipatterns, because content changes, and such changes should be made without the help of a frontend developer.

The only robust solutions are flex and grid.

Transition-based solution can also be made robust by setting max-width, max-height and overflow, because we put the element out of the document flow by using absolute positioning, but why reinvent the wheel?

Nice article though!

Collapse
venkyakshaya profile image
Akshaya Venkatesh Author

"in order of adherence to best practices" That's why the fixed width and height solutions are at the very bottom.
I didnt quite understand "Transition-based solution can also be made robust by setting max-width, max-height and overflow, because we put the element out of the document flow by using absolute positioning, but why reinvent the wheel?" Could you clarify?
Do you mean transform?

Collapse
mvoloskov profile image
Miloslav 🏳️‍🌈 🦋 Voloskov

Yes, it's transform. Sorry, it was 1am when I wrote the original comment)

Collapse
benpai profile image
Benji Grant

I do want to add that instead of negative margins, if the size of the element is known, calc is a much better system.

.center {
  position: absolute;
  height: 300px;
  width: 300px;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
}
Enter fullscreen mode Exit fullscreen mode

Of course you can use an extra calc to make it a bit more generic if you're using variables for your height and width, but this method allows you to use margins on your element as well, which can be useful if you don't want it touching the edges.

Collapse
venkyakshaya profile image
Akshaya Venkatesh Author

Useful tip! Thanks for sharing!

Collapse
ikevinclub profile image
kevin tang

.center {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

Collapse
abeltiezazu profile image
AbelTiezazu

good job AK

Collapse
dbsgroup09 profile image
DBSGROUP09

Hu