圈子周围的圈子与文本(Circles Around Circles With Text In)

 我怎么做“是的!!!” 以下代码中的文字显示在圆圈的中心？ 
 
 我已经尝试添加填充，但它只是将文本向右移动，即填充不是在所有方向均匀应用。 
 
 这是我的代码（ http://jsfiddle.net/yxVkk/646/ ） 
 
 HTML： - 
 
<div id="big-circle" class="circle big">
<div class="circle one"><span style="top: -50px;">YES!!!</span></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
 
 CSS： - 
 
.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
    }

    .one {
    left: -100px;
    top: -100px;
    }

    .two {
    top: -60px;
    left: 50px;
    }

    .three {
    right: -25px;
    top: -25px;
}


    .four {
        left: -25px;
        bottom: -25px;
        }

        .five {
        bottom: -60px;
    left: 50px;
    }

    .six {
    right: -25px;
    bottom: -25px;
    }
 
 注意：我更愿意在没有JS的情况下完成此操作，如上例所示。 

How would I make the "yes!!!" text in the following code appear centred in the circle?
 
I've tried adding padding, but it just moves the text to the right, i.e., the padding is not applied evenly in all directions.
 
Here's my code (http://jsfiddle.net/yxVkk/646/)
 
The HTML:-
 
<div id="big-circle" class="circle big">
<div class="circle one"><span style="top: -50px;">YES!!!</span></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
<div class="circle six"></div>
</div>
 
The CSS:-
 
.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    position: absolute;
}

.circle.big {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin: 100px;
    }

    .one {
    left: -100px;
    top: -100px;
    }

    .two {
    top: -60px;
    left: 50px;
    }

    .three {
    right: -25px;
    top: -25px;
}


    .four {
        left: -25px;
        bottom: -25px;
        }

        .five {
        bottom: -60px;
    left: 50px;
    }

    .six {
    right: -25px;
    bottom: -25px;
    }
 
Note: I would prefer to accomplish this without JS, as in the above example.

原文：https://stackoverflow.com/questions/24519525