A Simple CSS Trick to Vertically and Horizontally Center a Block

Centering a block horizontally is no problem. Centering an absolute positioned block has its challenges. Vertically centering anything on a page can make you pull your hair out. That is, until now.

I don’t remember where I found this solution so I appologize to whoever originated it. I’ve been using this method for about a year. Thankfully it’s short and easy to remember.

Update: I just found an article about the same exact thing!

.outerblock {
	position:relative;
	width:500px;
	height:300px;
}

.innerblock {
	margin: auto;
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width: 100px;
	height: 100px;
}

See the Pen Simple CSS Vertical and Horizontal Centering by kenhowardpdx (@kenhowardpdx) on CodePen