CSS Overlay Center Horizontally And Vertically

Jan 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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.