在CSS圈子中居中图标的更好方法

Question

我在圆圈内有一个符号。

http://jsfiddle.net/uqbujck3/

这是最好的方法吗？我听说可能是unreliable。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

与div文本对齐相同，但您可以使用transform进行完美对齐。 请尝试：

$(document).ready(function() {
	$(".circle").animate({
		width:'200px',
		height:'200px'
	},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>