CSS Overlay Center Horizontally And Vertically

January 30, 2018
.lua-overlay {
  position: relative;
}

.lua-absolute-center-xy {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<div class="lua-overlay" style="width: 200px; height: 200px; background-color: green;">  
    <img class="lua-absolute-center-xy" src="http://via.placeholder.com/100x100">
</div>

Center Image

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.