Creating tiles with CSS
I'm going to have to heavily disagree with Tolani Jaiye-Tikolo's answer. Using ID's isn't good CSS authoring generally (however this rule can be broken, like all rules.) This is because you create overly specific CSS that can only be used once.

Another point i'd like to make about their feedback: please only use tables for tabular data. Using them as structural elements is not the way to go. If you want to use the properties of a table element, use display: table;.

That said, onto some critique of your code. You asked what the best way to center align content is. There's several methods for achieving this, some very common ways are:


use text-align: center; on a parent container. This only affects inline or inline-block elements.
use margin: 0 auto; on a element. This only works on block type elements.


I noticed you're also looking to vertically align an element. This is a little more complex than horizontally aligning an element (But only slightly). I personally use the following two methods often:


Place display: table; on the parent/container element. Place display: table-cell; and vertical-align: middle; on the child element (the one you want to vertically center). The child element should sit in the middle of your parent vertically.
Other method is to make your element display: inline-block; and give it vertical-align: middle. It will center vertically according to its siblings.


There's other things you can improve on but unfortunately I'm at work so I can't provide examples and a more comprehensive answer, sorry!