How To Center CSS Elements In 7 Easy Ways

As you probably know trying to center elements in CSS can cause a headache even to experienced developers. There are many different situations and many different solutions. Sometimes it is best to choose one over another but other times it is a matter of personal preference. And to make the right decision, you need to know the pros and cons of each available option. In this article let’s talk about 7 ways to center elements in CSS.

Center CSS With Grid

The grid solution is very similar to the flex one. Even the code is almost the same. It behaves the same as the flex solution, except for the browser coverage. This might be a good solution if you do not have to cover IE at all and if you prefer using a grid over flex.

.div {
  display: grid;
  justify-content: center;
  align-items: center;
}

Center CSS With Flex

Flex in my opinion the simplest solution. You only need to add three properties to a parent element and the child will be centered inside of it. The align-items property aligns the child vertically, while the justify-content aligns it horizontally.

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

You can use this solution in almost every situation. Unless you have to support IE10.

Center CSS With Position

If the parent has a set height or min-height, then using position might be a good solution. A child with the position property set to absolute will not affect the parent’s height. In that case it is not wise to use this approach to align a box with text that can have a different length. This code will align a child horizontally and vertically:

.parent {
  position: relative;
  /* add some height to the parent element, for example: */
  min-height: 200px;
}

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

But if let’s say you need to align an element vertically use this style instead:

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Or this one if you have to align elements horizontally:

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

All properties in the code above are supported on all browsers. Unless you are still adding support for IE8 or lower. But that’s very unlikely.

Center CSS With Margin Margin

Using a margin to horizontally align a block element is also very popular. It is often used to align layout elements like containers, but it is a good fit for any block element. The code is very simple:

.child {
  margin: 0 auto;
}

This solution will allow you to align an element horizontally. To also align it vertically you can use some other solution, like padding.

Center CSS With Padding

You can use padding to center an element vertically and horizontally. But it’s worth noting that padding is rarely a good solution to center elements because it relies on fixed heights of child and parent which are rarely given.  To center an element with padding you need to divide equal padding value to all sites of the element:

.parent {
  height: 400px;
  width: 500px;
}

.child {
  height: 50px;
  padding: calc((400px - 50px) / 2) calc((500px - 50px) /2);
}

The sum of height and vertical padding determines the child’s vertical position. The child is centered if the sum is equal to the parent’s height.

.parent {
  height: 400px;
}

.child {
  height: 50px;
  padding: calc((400px - 50px) / 2) 0;
}

Same for the horizontal position. If the sum is equal to the parent’s width, the child is centered.

.parent {
  width: 500px;
}

.child {
  height: 50px;
  padding: 0 calc((500px - 50px) / 2);
}

Center CSS With Text align

The text-align property can be used to align any inline element. This solution is very good at aligning items like text, images, buttons, and links. Many of them have a display set to inline-block by default but you can also change the display property.

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

Center CSS With Vertical align

Vertical-align property controls the alignment of elements that are next to each other in one line. The elements need to have an inline or inline-block display for it to work. The use case for this solution would be to align icons with text.

.parent > .child {
  display: inline-block;
  vertical-align: middle;
}

This will only align elements along with the line height of the highest element. If you want to vertically align the element relative to the parent’s height, you can do it like this:

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

.child {
  display: inline-block;
}

It only allows you to center elements vertically. You can use the text-align property on the parent to center them horizontally as well.