How to Center Anything in CSS

23 March 2018

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;
}

See the Pen Centering in CSS by Egwuenu Gift (@lauragift21) on CodePen.

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


View All Posts šŸ”–

Subscribe to my Newsletter

Don't miss out on new articles from me. Get notified when a new article is published.


Hello! šŸ‘‹ Iā€™m Gift, a Frontend Engineer based in Lagos, Nigeria and I'm passionate about making the web accessible to everyone and building communities. 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.