CSS Overlay Center Text Vertically And Horizontally

September 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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.