FontAwesome положение на пользовательских элементов

Question

У меня есть пользовательский элемент и SASS выглядит следующим образом:

.tile {  
    &.account-tile:before { 
     font-family: FontAwesome; 
     content: "\f003"; 
    } 
} 

.tile:before { 
    color: rgba(255,255,255,0.5); 
    font-size: 50px; 
} 

Эти плитки разных размеров. Я хотел бы разместить значок в центре плитки, но я не уверен, как я могу это сделать эффективно. Может кто-нибудь дать мне руку?

Update 1

Я изменил свой SASS к этому:

.tile {  
    &.account-tile:before { 
     font-family: FontAwesome; 
     content: "\f007"; 
    } 
} 

.tile:before { 
    color: rgba(255,255,255,0.5); 
    font-size: 100px; 
    display: block; 
    text-align: center; 
    vertical-align: middle; 
    background-color: pink; 
    height: 100%; 
} 

, но, несмотря на то, что центры по горизонтали, это не центр по вертикали.

Answer 1

Поскольку шрифт Высокий является шрифтом, попробуйте text-align: center;