<div class="lightbox"> <div class="lightbox__center"> <img src="http://placehold.it/600x400"> </div> </div>
.lightbox { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; background: rgba(57, 70, 78, 0.8); } .lightbox__center { width: 0; height: 0; } .lightbox img { position: absolute; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); -webkit-box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); }