How to Center Elements in CSS Correctly

How to Center Elements in CSS Correctly

What should be difficult to center elements in CSS? That’s how you want to think spontaneously. However, if you’ve dealt with the topic many times, you also know that centering can sometimes become a real challenge. In the following article, we’ll show you five ways to center your elements and lettering in HTML using CSS3.

You will see that the method to be chosen depends on the specific situation so there can be no blanket recommendations for or against a particular method. We look at the different possibilities based on the following HTML and CSS codes.

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Center Elements in CSS</title>
	</head>
	<body>
		<div class="container">
			<div class="centered-element"></div>
		</div>
	</body>
</html>

CSS

.container {
  background-color: #262626;
  height: 300px;
  width: 100%;
}
.centered-element {
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-color: #ffae00;
}

Center Elements in CSS with Flexbox

With Flexbox, we can center elements both horizontally and vertically. The features are supported by all modern browsers, even From Internet Explorer version 10 onwards.

We now have to give the outer container, often called wrappers, the appropriate properties. To do this, we use the display attribute to define that it is a flexbox.

In the next step, we can center the items in this container horizontally via justify-content. To center the items vertically, we can use the align-items attribute.

All in all, our CSS looks like this:

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

This gives us this result:

See the Pen Center Element in CSS with Flexbox by itechonics (@itechonics) on CodePen.

Center Elements in CSS with Grid System

The next option is to use the CSS Grid system. Similar to the Flexbox, we also have the option of centering our items horizontally and/or vertically.

In principle, we only exchange the value of our display attribute with the grid.

This is what the complete code looks like:

See the Pen Center Element in CSS with Grid System by itechonics (@itechonics) on CodePen.

Where is the difference now and when should I use which of the two options? Sure, you’re wondering that now.

But, it’s like Radio Yerevan, it depends. I can’t recommend anything to you, because as you’ve seen, both can do the same for this example.

However, the CSS Grid system offers many other useful functions, such as columns and rows, size and positioning of individual elements. Learn more in this article. The difference between the two methods becomes clear only when one understands what they are made for.

Now let’s add two more. centered element, we can see a clear difference in the presentation. This is the result with Flexbox:

See the Pen Center Elements in CSS with Flexbox by itechonics (@itechonics) on CodePen.

Here’s what it looks like in the grid system:

See the Pen Center Elements in CSS with Grid System by itechonics (@itechonics) on CodePen.

Text Alignment in CSS

The alignment of the text is also a form of centering. We could, of course, center our text using the above methods, because a text is also an element. However, we do not have to do this, because CSS offers the attribute text-align.

.container p {
  text-align: center;
}

Here it doesn’t matter if we give the attribute to the paragraph (p-tag) or the .container.

It should be borne in mind that with this method, we only have the option of centering the text horizontally. If we want to arrange our text in the middle of the box, we could achieve this via Flexbox, the grid system, or absolute positioning.

Absolute positioning in CSS

Absolute positioning is also a valid method, but should only be used in an emergency, as it is rather unsuitable for responsive web design. The problem is that elements can slip and we need a lot of breakpoints to position sensibly. Nevertheless, we would like to present this method here.

Firstly, the outer container requires relative positioning. This means that items inside the container can align absolutely within this container and cannot leave it. This is what we achieve with this code:

.container {
  position: relative;
}

Now we can position the inner element absolutely. With left and top, we set the element 50% away from the top and left margins. Since we have the upper left corner of the element in the middle, we also need to subtract about transform each -50%, i.e. half of the element to be positioned.

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

Please note that if you want to center multiple elements about this possibility, they would all lie on top of each other, as they are absolutely positioned. Here you would have to create a container for these inner elements that include these elements. So you need virtually several elements in an absolute element in a relative container. Sure, so far?!

Distance Positioning in CSS

The last way to position elements with CSS3 is distance positioning. Here, we only have the option of centering elements horizontally. For vertical centering, we need to use one of the other methods mentioned.

In distance positioning, we give the element to be centered an outer distance to the left and right margins. If it is the same size, the element is centered. Up and down we leave the distance at 0, whereby this can be adjusted optionally. The following notation represents the first value for the y-axis (top and bottom) and the second value for the x-axis (left and right). For the x-axis, we set the value to auto because it then automatically adjusts proportionally.

.container .centered-element {
  margin: 0 auto;
}

Centering: Avoids these common errors

Despite these many possibilities, one or the other despairs when it comes to center elements. If you’re already up to your hair, work out the following list. Possibly the error is here:

  • Your outer container (here .container) requires position: relative; and display: block;
  • Your containers (here .container and .centered-element)need a fixed width and possibly height.
  • Your elements have a margin, padding, or border that you don’t know about.

Conclusion: Many paths lead to the center of Rome

At first, it looks like there are a lot of possibilities for centering your elements. However, you have to bear in mind that the specific situation is important. Not always every method is equally suitable or even useful.

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.