Ways to Horizontally and Vertically Center Child Elements in Parent
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.
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
table if needed.
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.
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.
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.