Horizontal & Vertical Center

HTML

<div>
    
    <ul>
        <li>
            <a href="#">
                <img src="http://placekitten.com/g/32/32" />
             
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://placekitten.com/g/32/32" />
                <span>Label</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://placekitten.com/g/32/32" />
                <span>Label</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://placekitten.com/g/32/32" />
                <span>Label</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://placekitten.com/g/32/32" />
                <span>Label</span>
            </a>
        </li>
    </ul>
    
</div>

CSS

div {
    background-color: #702988;
    height:300px;
    position: relative;  /* make sure the parent element has position */
    width: 100%;
}

ul {
    background-color: #827e00;
    list-style: none;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: -290px;    /* 20px padding + half the element width */
    margin-top: -60px;    /* 20px padding + half the element height */
    padding: 20px;
    position: absolute;
    top: 50%; left: 50%;
}

li {
    background-color: #5a5700;
   
    display: block;
    float: left;
    margin-left: 10px;
}

li:first-child {
    margin-left: 0;
}

li > a {
    color: #fff;
    display: block;
    height: 80px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100px;    /* 5 * 100px + 40px margin + 40px padding = 580px  */
}

li > a > img,
li > a > span {
    display: block;
    left: 50%;
    position: absolute;
}

li > a > img {
    margin-left: -16px;
    top: 10px;
}


li > a > span {
    bottom: 10px;
    margin-left: -50px;
    text-align: center;
    width: 100%;
}