How center an image

Five squares centered

Recently I’ve been making changes to a front-end code written by couple of Java developers very long time ago and worst offenders were vertically centered images.

For starters, let’s have an image inside a div/figure/custom element.

Unfortunately I have to support Internet Explorer 11 but fortunately there is a way how to center an inline element inside a block element since Internet Explorer 4. The solution is called  vertical-align .

First we need to set  line-height  for the parent element because  vertical-align  aligns elements to a line:

And to center the image itself we have to write:

That’s all.

When you can use CSS Grid the equivalent would be: