CSS Overlay Center Text Vertically And Horizontally

Sep 15, 2017

lua-text-overlay and lua-center-text is required to achive overlay effect (text on top of image).

To center text vertically and horizontally, lua-center-text and .lua-center-text span is required.

.lua-text-overlay {    position: relative;}.lua-text-overlay .lua-center-text {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    display: table;}.lua-text-overlay .lua-center-text span {    display: table-cell;    vertical-align: middle;    text-align: center;}
<div class="lua-text-overlay">      <div class="lua-center-text">        <span>Center Text</span>    </div>    <img src="http://via.placeholder.com/150x150"></div>

❤️ 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.