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

I just added to the html

<div align="center"></div>

to surround your existing code to get the image to center

hope that helps

Answer 2

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.

Answer 3

Please Try the below css for .overlay as in your fiddle

.overlay {
    z-index: 99;
    width: 70%;
    /* height: 100%; */
    /* margin-left: 15%; */
    /* vertical-align: middle; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/