水平居中很简单:text-align: center;.可以通过将 line-height 设置为等于容器高度来实现元素内文本的垂直居中，但这在浏览器之间存在细微差别.在小元素上，比如通知徽章，这些更明显.

Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-height equal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced.

***将 line-height 设置为等于 font-size(或稍小)并使用填充.你必须调整你的身高以适应.

Better is to set line-height equal to font-size (or slightly smaller) and use padding. You'll have to adjust your height to accomodate.

这是一个纯 CSS 的单一 <div> 解决方案，看起来很像 iPhone.它们随着内容而扩展.

Here's a CSS-only, single <div> solution that looks pretty iPhone-like. They expand with content.

演示:http://jsfiddle.net/ThinkingStiff/mLW47/

输出:

CSS:

.badge {
    background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px; 
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
}

HTML:

<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>