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”