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

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”