垂直和水平居中 CSS 中圆圈中的文本（如 iphone 通知徽章）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4801181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
提问by Matt
I'm looking for a way of to do a cross-browser iphone-like badge in CSS3. I'd obviously like to use one div for this, but alternative solutions would be fine. The important factor is that it needs to be horizontally and vertically centered in all browsers.
我正在寻找一种在 CSS3 中做一个跨浏览器的 iphone-like 徽章的方法。我显然想为此使用一个 div，但替代解决方案也可以。重要的因素是它需要在所有浏览器中水平和垂直居中。
An interesting design issue about these notifications is that they cannot have a specified width (height is fixed) - they should be able to handle [in ascii drawing] (1) and (1000), where (1000) is not a perfectly rounded circle, but instead looks more like a capsule.
关于这些通知的一个有趣的设计问题是它们不能有指定的宽度（高度是固定的）——它们应该能够处理 [in ascii 绘图] (1) 和 (1000)，其中 (1000) 不是一个完美的圆，但看起来更像是一个胶囊。
EDIT: Additional constraints (from Steven):
编辑：附加约束（来自史蒂文）：
- No JavaScript
- No mangling of the display property to table-cell, which is of questionable support status
- 没有 JavaScript
- 没有将显示属性修改为表格单元格，这是有问题的支持状态
回答by ThinkingStiff
Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-heightequal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced.
水平居中很容易：text-align: center;。元素内文本的垂直居中可以通过设置line-height等于容器高度来完成，但这在浏览器之间存在细微差别。在小元素上，比如通知徽章，这些更明显。
Better is to set line-heightequal to font-size(or slightly smaller) and use padding. You'll have to adjust your height to accomodate.
更好的是设置line-height等于font-size（或稍小）并使用填充。你必须调整你的高度以适应。
Here's a CSS-only, single <div>solution that looks pretty iPhone-like. They expand with content.
这是一个纯 CSS 的单一<div>解决方案，看起来很像 iPhone。它们随着内容而扩展。
Demo: http://jsfiddle.net/ThinkingStiff/mLW47/
演示：http: //jsfiddle.net/ThinkingStiff/mLW47/
Output:
输出：
CSS:
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:
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>
回答by Richard Herries
If you have content with height unknown but you know the height the of container. The following solution works extremely well.
如果您的内容高度未知，但您知道容器的高度。以下解决方案非常有效。
HTML
HTML
<div class="center-test">
<span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt obcaecati maiores nulla praesentium amet explicabo ex iste asperiores
nisi porro sequi eaque rerum necessitatibus molestias architecto eum velit
recusandae ratione.</p>
</div>
CSS
CSS
.center-test {
width: 300px;
height: 300px;
text-align:
center;
background-color: #333;
}
.center-test span {
height: 300px;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
}
.center-test p {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
color: #fff;
}
EXAMPLE http://jsfiddle.net/thenewconfection/eYtVN/
示例 http://jsfiddle.net/thenewconfection/eYtVN/
One gotcha for newby's to display: inline-block; [span] and [p] have no html white space so that the span then doesn't take up any space. Also I've added in the CSS hack for display inline-block for IE. Hope this helps someone!
新手要显示的一个问题：inline-block；[span] 和 [p] 没有 html 空格，因此 span 不会占用任何空间。我还添加了 CSS hack 以显示 IE 的内联块。希望这可以帮助某人！
回答by Armand
Modern Solution
现代解决方案
The result is that the circle never gets distorted and the text stays exactly in the middle of the circle - vertically and horizontally.
结果是圆圈永远不会扭曲，文本正好位于圆圈的中间 - 垂直和水平。
<div class="circle">text</div>
and
和
.circle {
background: #ddd;
width: 40px; height: 40px;
border-radius: 50%;
display: flex; // or inline-flex
align-items: center;
justify-content: center;
text-align: center;
}
Simple and easy to use. Enjoy!
简单易用。享受！
回答by Steven
Interesting question! While there are plenty of guides on horizontally and vertically centering a div, an authoritative treatment of the subject where the centered div is of an unpredetermined width is conspicuously absent.
有趣的问题！虽然有很多关于水平和垂直居中 div 的指南，但显然缺乏对居中 div 的宽度不确定的主题的权威处理。
Let's apply some basic constraints:
让我们应用一些基本的约束：
- No Javascript
- No mangling of the display property to
table-cell, which is of questionable support status
- 没有Javascript
- 没有将 display 属性修改为
table-cell，这是有问题的支持状态
Given this, my entry into the fray is the use of the inline-blockdisplay property to horizontally center the span within an absolutely positioned div of predetermined height, vertically centered within the parent container in the traditional top: 50%; margin-top: -123pxfashion.
鉴于此，我进入争论的是使用inline-blockdisplay 属性在预定高度的绝对定位 div 内水平居中跨度，以传统top: 50%; margin-top: -123px方式在父容器内垂直居中。
Markup: div > div > span
标记： div > div > span
CSS:
CSS：
body > div { position: relative; height: XYZ; width: XYZ; }
div > div {
position: absolute;
top: 50%;
height: 30px;
margin-top: -15px;
text-align: center;}
div > span { display: inline-block; }
Source: http://jsfiddle.net/38EFb/
来源：http: //jsfiddle.net/38EFb/
An alternate solution that doesn't require extraneous markups but that very likely produces more problems than it solves is to use the line-height property. Don't do this. But it is included here as an academic note: http://jsfiddle.net/gucwW/
另一种不需要无关标记但很可能会产生比它解决的问题更多的问题的替代解决方案是使用 line-height 属性。不要这样做。但它作为学术笔记包含在这里：http: //jsfiddle.net/gucwW/
回答by James Harrington
Here is an example of flat badges that play well with zurb foundation css framework
Note: you might have to adjust the height for different fonts.
这是一个与 zurb 基础 css 框架配合良好的扁平徽章示例
注意：您可能需要调整不同字体的高度。
http://jsfiddle.net/jamesharrington/xqr5nx1o/
http://jsfiddle.net/jamesharrington/xqr5nx1o/
The Magic sauce!
魔法酱！
.label {
background:#EA2626;
display:inline-block;
border-radius: 12px;
color: white;
font-weight: bold;
height: 17px;
padding: 2px 3px 2px 3px;
text-align: center;
min-width: 16px;
}
