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>
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*/
}
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>
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%;
}
Using margin
We can horizontally center the inner div using margin
.inner{
margin: auto;
}
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;
}
See it in action here
Using grid
.center{
display: grid;
place-items: center;
}
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.