CSS Centering with Angular 7/8 Example

In this tutorial, we'll learn how to center elements in CSS and Angular 7/8 using the modern Flexbox layout.

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners.

But with the advent of Flexbox, CSS centering became easier and clearer than ever.

We'll make use of Stackblitz for our Angular project.

Horizontal Centering

Let's start with horizontal centering. Open the src/app/app.component.html file and add the following <div>:

<div class="center">
  <h1>Hello Angular 8!</h1>
</div>

We add a div with a center class. Inside it, we add an <h1> tag.

Next, open the src/app/app.component.css file and add the center class with the following styles:

.center {
  display: flex;
  justify-content: center;
}

That's it. our content is horizontally centered by simply making the div a flex container and using the justify-content property. Here is a screenshot:

CSS Center Example

Vertical Centering

Now, let's see how we can center the content vertically using Flexbox.

It's also easy to achieve that using Flexbox by simply adding align-items: center.

Let's first add the following styles to change the color and height of the containing div so we can see the content clearly centered vertically:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

This is the result:

CSS Centering

Now, let's apply the vertical centering:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
  align-items: center;
}

This is the result:

This will center any elements inside the div. If you would like to center specific elements, you can use align-self: center, instead, on the element.

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

.center h1{
  align-self: center;
}

If you need to center on the whole page, you can simply give the div the same height as the page:

.center {
  display: flex;
  background-color: #ff1124;
  justify-content: center;
  height: 100vh;
}


.center h1{
  align-self: center;
}

This is a screenshot:

CSS Center Example

Conclusion

In this quick example, we've seen how we can center elements in CSS horizontally and vertically using Flexblox which provides easy and clear ways to achieve that without resorting to old CSS tricks.

This example was demonstrated with an Angular 8 project but these tricks are not tied to Angular in any way.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status