Text vertically and horizontally centered over a responsive image

Question

I\'m looking to center text both vertically and horizontally over an image that grows when the page gets wider.

I originally had the image set as the background for

Answer 1

You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.

Here's a fiddle using that technique.

If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:

Here's a fiddle using that method, this one stretches the image because of the max-height.