3 Ways to Center an Element in CSS

Video tutorial for those who prefer them

Introduction

Centering an element inside a div often leaves newcomers puzzled when learning web development. Most of us know you can center elements horizontally using the HTML center tag, but when it comes to centering an item both horizontally and vertically, a lot of people get stuck. Fear not, for here are three ways to do just that!

Method 1: Display Grid

Among many different values that can be assigned to the CSS display property, grid is perhaps an underrated one. Not only can you create some pretty slick layouts, but it also comes extremely handy when you are in need of a good way to position child elements.

To center a child using the display grid method, all you have to do is to add the following code to the parent element:

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

It's that simple! Display grid has a unique property of place-items that allows you to position child items both horizontally and vertically with one line of code. Neat!

Method 2: Display Flex

Much as the display grid property, display flex is another underrated type of element display property. Display flex, also known as flexboxes, are very useful in creating good looking and responsive web layouts. They can be used to position child elements horizontally and vertically inside the element and create beautiful UIs for your webdev projects.

How to use a flexbox to center items? You use the following markup on the parent node:

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

And just like that, the child node is centered! How does this work? The justify-content property is used to align elements along the main axis of the flexbox (horizontal by default; can be changed using the flex-direction property), where the align-items is used to position children along the cross axis. When both are set to center, the child is position in the middle of the parent element.

Method 3: Position Absolute

The position property is used to, surprise surprise, position an element. Shocking, I know.

To center an element using the position property, use the following markup on the parent and child elements:

.parent {
  position: relative;
}

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

Now, this may look a little confusing, but here's how it works: setting the positioning on the parent to relative makes all the child elements position themselves relative to the parent. That way, when we set the child positioning to absolute, it will be positioned absolutely relative to the parent. If we didn't make the parent position relative, the children with the absolute position property would be aligned relative to the document body. After we set the child position to absolute, we set it to 50% offset from the top and the left sides of the parent. This pushes the child 50% of the parent height from its top and 50% of the parent width from its left. But this does not center our child element properly, it only gives it a margin. If we just left it here, the child element's top-left corner would be at the center of the parent, not the child itself. To fix this, we use transform: translate(-50%, -50%);. This line moves the child element back to the top by 50% of its height and back to the left by 50% of its width. When translating an element, the value given is relative to its own dimensions, as opposed to the top and left properties, which are relative to its parent.
The combination of these two lines puts the child's center to the parent's center and perfectly centers the element inside it. Nice!

Conclusion

There are many ways to center an element inside a div in CSS. I included only these three as they are they best ones I know of. There are some that I left out and probably some that I am yet to learn about that might be even better. But these do the job rather well, so I am not in need of an alternative method right now. I hope this article has helped someone in their next webdev adventure!