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