<div id="container"> <div class="centerme"> <img src="http://placekitten.com/200/150"> <div class="overlay"> <p class="centerme">This is some text, also centered.</p> </div> </div> </div>
img { line-height: 0; margin: 0; padding: 0; } #container { width: 375px; height: 350px; background-color: #eee; border: 1px solid #ddd; } .centerme { margin: 0 auto; display: table; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .overlay p { background-color: rgba(0,0,0,0.7); font-family: helvetiva, arial, sans-serif; color: #FFF; }