Darken image overlay and add text over it in CSS

Question

How would I darken (add a semi-transparent overlay) and add text to this image (but centred horizontally and vertically) as below:

Answer 1

http://jsfiddle.net/6jf0nxd5/21/

HTML

    This is some very long text that might or might now flow on top of the image
   

CSS

.imgWrap{
    display:inline-block;
    background:#000;
    position:relative;
}

.imgWrap > img{ display:block; opacity:.5; }
.imgWrap > span{ position:absolute; display:table; text-align:center; z-index:1; height:100%; left:0; right:0; padding:20px; color:#FFF; font-size:2em; }
.imgWrap > span::after{ content:attr(data-title); display:table-cell; vertical-align: middle; }