A few minutes surfing on the internet is already enough for us to see how common it is to have centered elements in a web page layout. But how to do it? How to have elements perfectly centered in the web page? This article aims to explore a few CSS alternatives on how we can get the job done. First we are going to talk about horizontal alignment, and then we’ll explore vertical alignment.

Horizontal alignment

Having horizontally centered elements is quite useful in the world of web. This kind of positioning can be used to align text, images or any other type of element. A good example is a logo centered at the top of the page within a header. We can see one example below:

The picture above shows an example of a simple blog post layout where we have a header with the company logo centered at the top of the page. As an exercise, let's see how we can achieve the logo alignment proposed in this example.

First we need to understand the header HTML structure. We can see it in the code snippet below:

<header>  
  <img src="https://www.avenuecode.com/images/ac-logo-sprite.png" alt="AC-LOGO" />
</header>  

The HTML structure says that we only have a <header>element wrapping an <image> element. Pretty simple so far. The picture below shows what we can see before the logo alignment:

In this case, it's very simple to get our logo centered, because we are simply talking about moving one element on the horizontal axis. To make this happen, we can use the CSS property text-align with the value center on our header element. Of course this would cause all the elements inside the header to be positioned in its center, which doesn't matter in our case since we only have our logo standing there. Our CSS code would look something like this:

header {  
  background: lightskyblue;
  height: 70px;
  text-align: center;
}

What is important to us here is the property text-align: center which is responsible for our magic! The question now is: what if my logo is not an image element, but it is only a div with the logo as a background? Would our simple approach still work? Let's take a look at our new HTML structure:

<header>  
  <div id=logo></div>
</header>  

In the above HTML snippet, we only see a div with the "logo" identifier. The image is now shown through a background CSS property, like below:

#logo {
  background: url("https://www.avenuecode.com/images/ac-logo-sprite.png");
  width: 70px;
  height: 70px;
}

If you refresh your browser, you will see that we still have our logo positioned on the header's left corner, although we never removed its text-align: center property. This result leads us to think that we need a different approach in such situation. But what that would be? Fortunately, it is still a simple one. The CSS snippet below shows what we did:

header {  
  background: lightskyblue;
  height: 70px;
  width: 100%;
  text-align: center;
}

#logo {
  background: url("https://www.avenuecode.com/images/ac-logo-sprite.png");
  width: 70px;
  height: 70px;
  display: inline-block; 
}

If we pay attention on what is new, we are going to see that the only change we had to do was in the logo element. Since a div is, by default, a block element (which means it will occupy 100% of its horizontal space), we had to tell it to display as a inline-block element instead, by adding display: inline-block. This CSS property only tells the element to display with both inline and block characteristics, which in our case, means the logo element should not fill up the entire line. The good news is that this second approach also works fine with our first HTML structure, which had an image element inside our header.

Vertical alignment

Now that we’ve spoken about how to make an element to display horizontally centered, we need to talk about how we can reach the same state on the Y axis. Vertical alignment is very useful when we want to create full-width home pages with a centered content, such as text or simple form elements to gather user emails for example. In our practical example, we are going to try to add the Avenue Code logo to the center of the page to drive users’ attention right off the bat. Our result will look something like what is shown in the picture below:

Our HTML structure will look something like this:

<div class="background"></div>  
   <div class="hero">
     <div class="logo">
   </div>
</div>  

Based on the result we are expecting above, let's dive into the methods:

Method 1: Absolute Positioning

In this method, we are going to make use of the position: absolute property so we can float our logo anywhere in the page. We will then move the element 50% from the left and another 50% from the top. This will guarantee our top left corner is precisely centered and aligned in our page. However, we don't want to centralize its top left corner, but we want to have the logo's center exactly in the center of the page. In that case, we need to check the image size, divide it by 2 and finally apply the value as negative margins as shown below:

.hero {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
}

In our case, our logo is 70x70px, which means, we need to adjust our negative margins by -35px in order to obtain the desired result. Now our logo displays exactly in the middle of our container. However, as we can see, we are dependent on the size of the image in this case, which couldn't be the case, because there will be situations where we won't know how big our image/content is. What can we do in such situation? In this case, we will need to appeal to the second method:

Method 2: Translate Positioning

In our second method, the size of the logo is not important anymore. We are now making use of the translate method, which will move the element as much as we want. In our case, we are translating (moving) the element by -50% both left and top so we can adjust it to center. The code will look like this:

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

For simplicity, we are not considering crossbrowser compatibility. We are only adding the transform property. But you can make use of frameworks or vendor prefixes in your code, to make sure you are covering as many browser versions as you can.

Method 3: Auto Margin

This is a simple method where we try to remove all margins and set it as auto. It's a simple and powerful method - perhaps my favorite one:

.logo {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
}

This method requires us to handle the logo itself instead of its parent/wrapper as we saw in the other methods. However, it's clean and effective.

Method 4: Flex Positioning

Flex is a great add-on for CSS. It makes the developer's life much easier when speaking about element positioning and layouts. Unfortunately, only the most recent browsers will support it. Flex is a topic that deserves a dedicated article, so for now, we are only going to show how we would achieve the same results by using its methods.

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

In this case, we are defining our .hero container as a flex component by using the display: flex property. We also need to set its height. In our case we are telling our hero to occupy the whole vertical portion of the screen. Then we are adding justify-content: center so all items will be centered through horizontal axis. Finally, we are telling the browser to also centralize the content vertically, by using the property align-items: center.

Again, for the sake of simplicity, we are not considering cross-browser compatibilities when using the flex properties, as this information is readily available elsewhere.

Conclusion

The question of how to center elements using CSS is a question that comes up very often. In this article we saw that we have a number of ways to do it and each one has its own complexity or simplicity. It's up to us to define which one best fits our needs.