Вертикально и горизонтально Центровые глификоны

Question

Как я могу центрировать мои глификоны вертикально и горизонтально (кросс-браузер) внутри этого списка?

Мои CSS не центрируют элементы вообще.

Как это выглядит:

Что это должно выглядеть следующим образом:

<footer> 
    <div class="container vertical-center"> 
     <ul class="list-inline center-block"> 
      <li class="social-icon img-circle"><a href="http://facebook.com"><i class="fa fa-facebook fa-4x"></i></a></li> 
      <li class="social-icon img-circle"><a href="http://twitter.com"><i class="fa fa-twitter fa-4x"></i></a></li> 
      <li class="social-icon img-circle"><a href="http://linkedin.com"><i class="fa fa-linkedin fa-4x"></i></a></li> 
     </ul> 
    </div> 
</footer> 

// CSS 
footer { 
    background-color: #9c2264; 
    padding: 30px; 
} 

.vertical-center { 
    display: flex; 
    align-items: center; 

    vertical-align: middle; 

    /* display: inline-block; 
    vertical-align: middle; 
    float: none; */ 
} 

.social-icon { 
    background-color: #fff; 
    width: 75px; 
    height: 75px; 
} 

Answer 1

Круги очень просто с помощью CSS border-radius:

.social-icon { 
    background: #fff; 
    width: 75px; 
    height: 75px; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 75px; 
    vertical-align: middle; 
    padding-top: 10px; 
} 

Fiddle: http://jsfiddle.net/aow3rsbd/