html - 在 CSS 圆圈内居中图标的更好方法

Question

我在圆 div 中有一个符号。

http://jsfiddle.net/uqbujck3/

这是最好的方法吗？我听说它可能不可靠。

.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

与 div text-align 相同，但您可以使用 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>