DEV Community

Cover image for 4 ways to perfectly center content using CSS
Rajat Kapoor
Rajat Kapoor

Posted on • Originally published at blog.rajatkapoor.me

4 ways to perfectly center content using CSS

Centering content in CSS is something that beginners struggle a lot with. CSS provides a lot of options that allow you to center content inside a container. We'll try some of the most commonly used ones.

Centering text

Let's start by learning how to center text in a container

<!--  our html has a container and text content inside -->
<div class="container center">
  this text should be centered
</div>

Enter fullscreen mode Exit fullscreen mode

We can center the text content using text-align: center. Here's is how our CSS looks

/* Just to see how big the container is*/
.container {
  background: black;
  font-size: 2rem;
  color: turquoise;
  height: 400px;
}

.center {
  text-align: center;  /* horizontally center aligns the text */

  vertical-align: middle;  /* aligns the text in the middle of the `line-height` of the text*/
}
Enter fullscreen mode Exit fullscreen mode

See it in action:

If you want to place the text at the center of the screen, wrap it in a div and follow any of the techniques below.

Centering a div inside another

There are multiple ways to do it. Check out all of these and let me know your favorite one in the comments. For the next few examples, we'll use this common HTML and CSS and highlight only the CSS changes needed to center the contents

HTML:

<!--  our html has a container which contains a div we wish to center-->
<div class="container center">
  <div class="inner">
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

#### CSS:

html,
body {
  height: 100%;
}
.container {
  background: black;
  width: 100%;
  height: 100%;
  font-size: 2rem;
}

.inner {
  background: turquoise;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Using margin

We can horizontally center the inner div using margin

.inner{
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

See it in action here

Using flex

To center this using flex, we need the following CSS:

.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

See it in action here

Using grid

.center{
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

See it in action here

Conclusion

This is not all of it. There are many other ways to center content. Post your favorite way of centering content in the comments.

Top comments (2)

Collapse
 
__manucodes profile image
manu • Edited

Another solution:

<style>
.my_awesome_div {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%)
}
</style>
<div class=".my_awesome_div">
Hello, World!
</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rajatkapoor profile image
Rajat Kapoor

This is a nice addition. Thanks