7 Ways To Center Elements In CSS

Posted by TotalDC

As you probably know centering 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 right decision, you need to know pros and cons of each available option.

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;
}

Flex

Flex in my opinion the most simple 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.

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 that 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 lets 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 element horizontaly:

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

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

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.

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 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);
}

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;
}

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 text-align property on the parent to center them horizontally as well.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: