The previous two posts have given different solutions to horizontally or vertically center child element in parent. Combining the tricks, we can achieve the two effects at the same times. In this post, I’ll introduce serveral recipes to horizontally and vertically center child elements at the same time.

As the previous two posts, the basic HTML page structure is shown first:

Here and in the following examples, if I set the height or width of the div, I just want to make the example more illustrative. The recipes are feasible under adjustable height and width.

Recipe1

We can combine the inline-block + text-align solution for horizontally centering and the table-cell + vertical-align solution for vertically centering to achieve the needed effect:

This recipe has very good browser compatibility: to support old IE browser, just add zoom: 1 property and replace div with table if needed.

Recipe2

Since we can both horizontally and vertically center elements with relative position and transform property, it’s natural to combine the two:

This recipe is very simple and intuitive, but you need add some private browser prefixes to make it work in different browsers.

Recipe3

flex layout is very powerful and we can center elements with it:

It’s the simplest solution (thanks for CSS3!), and we only need to set the parent’s property. The shortcoming is that flex is not well supported among browsers.

Conclusion

It’s the third post of the centering series, and it’s a good practice to use the tricks introduced in previous posts. Of course there are other solutions, and I’ll be very happy to discuss it with you if you can share it with me.