JSFiddle - React, Tailwind, and code Playground

CSS

#image-container {
  float: left;
  top: 50%;
  left: 50%;   
  position: relative
}
#image-container img{
  display: block;
  flaot: left;
  margin-top: -50%;
  left: -50%;
  position: relative    
}

JavaScript

var docHeight = $(document).height();

    $("body").append("<div id='overlay'></div>");

    $("#overlay")
        .height(docHeight)
        .css({
            'opacity': 0.4,
            'position': 'relative',
            'top': 0,
            'left': 0,
            'color': 'white',
            'background-color': 'black',
            'width': '100%',
            'z-index': 5000
        });

    $("#overlay").append("<div id='image-container'><img id='photo' src='http://ecn.channel9.msdn.com/o9/c4fcontent/migration/1815291/fingerprintreader18.jpg' alt='image' /></div>");