How to Center Anything in CSS

Centering in CSS can be a pain in the ass. There are several methods to achieve just one task, centering an element. To cut to the chase i'll outline two quick methods to achieve this in a jiffy ✈.

Flexbox Method

<div class="flex">EGWUENU GIFT NDUDI</div>
<!-- CSS using flexbox as a default method for centering div -->

.flex {
margin: 20px;
font-size: 30px;
color: #133B49;
font-family: 'Ubuntu', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}

Grid Method

<div class="flex">EGWUENU GIFT NDUDI</div>
<!-- CSS using grid system as a default method for centering div -->

.grid {
margin: 20px;
font-size: 30px;
color: #D6005C;
font-family: 'Ubuntu', sans-serif;
display: grid;
justify-items: center;
align-items: center;
}

"There are 1000 ways to do a particular thing in CSS. The question is are you doing it correctly? - Unknown"

View All Posts 🔖

Hello! 👋 I’m Gift, a developer advocate and content creator passionate about sharing my learning and experience with other developers. I write content on HTML, CSS, Jamstack, Accessibility, and Career related topics.

If you find this article helpful consider sharing this post, connecting with me on Twitter or becoming a Patron.