Hi, I'm Gift Egwuenu

I’m passionate about web technologies and constantly learning and improving my skills. I enjoy creating solutions to complex problems.

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”
comments powered by Disqus