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;}

grad rakičan koliko?