J. Pedro Ribeiro

Vertically Centering Images with HTML & CSS

August 03, 2012

Here is a quick trick whenever you need to vertically centre an image (or paragraph, or any other element) inside its parent container: treat them like tables. That’s right.

By setting the parent element’s display type to table and the child element to table-cell we can vertically align its content. Have a look at the code below:

HTML

 

  

Centred element

 

CSS

  div {display: table; height: 100px}   p {display: table-cell; vertical-align: middle;}

Depending on your site structure, that parent tag could be non-semantic but it’s a price to pay! Also, you got to set a fixed height to this parent element.

There are other solutions using jQuery at page loading but to me it seems too much “power” for such a simple result.

Got any other solution? Let me know!


J. Pedro Ribeiro

Hello!
I’m a Brazilian front-end developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn