Лучший способ центрирования значка в пределах круга CSS

Question

У меня есть символ внутри круга div.

http://jsfiddle.net/uqbujck3/

Это лучший способ сделать это? Я слышал, что это может быть unreliable.

.circle { 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 48px; 
 
    padding: 0; 
 
    background: #fff; 
 
    border: 1px solid #1588cb; 
 
    color: #1588cb; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    font-weight: 300; 
 
    display: inline-block; 
 
    text-decoration:none; 
 
}

<div> 
 
    <a href="#" class="circle">A</a> 
 
</div>

Answer 1

ли то же самое с сНу выравнивания текста, но вы можете использовать преобразование для идеального выравнивания. Пожалуйста, попробуйте:

$(document).ready(function() { 
 
\t $(".circle").animate({ 
 
\t \t width:'200px', 
 
\t \t height:'200px' 
 
\t },2000) 
 
})

.circle { 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 48px; 
 
    padding: 0; 
 
    background: #fff; 
 
    border: 1px solid #1588cb; 
 
    color: #1588cb; 
 
    font-size: 18px; 
 
    font-weight: 300; 
 
    position:relative; 
 

 
} 
 
.a-text{ 
 
    position: absolute; 
 
    text-decoration:none; 
 
    top:50%; 
 
    left:50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="circle"> 
 
    <a href="#" class="a-text">A</a> 
 
</div>