easwee.net // tiny digital playground

CSS only responsive horizontaly and verticaly centered content overlay

!!!Note: this is a very old way of doing this when we still supported Internet Explorer 8 and responsive design became a thing.

Centers content horizontally and vertically without setting parent’s height. Works with any width value. Supports IE8 and above. Supports mobile screen resolution (responsive).

HTML: #

<div class="sample-container">
    <img src="http://placehold.it/300x200" alt="" />
    <div class="sample-container-overlay">
        <div class="sample-container-overlay-inner">
            <div class="sample-container-overlay-inner-content">
                <a class="link1" href="#">Item 1</a>
                <a class="link2" href="#">Item 2</a>
                <a class="link3" href="#">Item 3</a>
            </div>
        </div>
    </div>
</div>

CSS: #

.sample-container {
    position:relative;
    max-width:500px;
    margin:0 auto;
}
.sample-container img {
    display:block;
    max-width:100%;
    width:100%;
}
.sample-container-overlay {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:200px;
    margin:auto;
}
.sample-container-overlay-inner {
    display:table;
    width:100%;
    height:100%;
}
.sample-container-overlay-inner-content {
    display:table-cell;
    vertical-align:middle;
}
.sample-container-overlay-inner-content a {
    display:block;
    padding:10px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    opacity:.8;
}
.sample-container-overlay-inner-content a:hover {
    opacity:1;
}
.sample-container .link1 {background:red;}
.sample-container .link2 {background:green;}
.sample-container .link3 {background:blue;}