如何在按钮内居中对齐离子图标？

我有这个HTML结构:

    
        
            
        
        Item 1
    



    
        
            
        
        Item 2
    

我添加了这个自定义css:

.circle {
    background-color: #00f;
    border-radius: 100%;
    border: 1px solid #00f;
    width: 50px!important;
    height: 50px;
    color: #fff;
}
.circle i {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

但它以这种方式显示:

如何才能cards获得正确的高度和ion-icons按钮的中心？

谢谢你的时间.

您可以设置text-align到center和line-height到50%或试试这个:

.circle {
    background: blue;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 100%;
}

.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    display: block;
    background: red;
}

小提琴:http://jsfiddle.net/41eo0he7/