CSS中垂直和水平居中的圆形文本（例如iphone通知徽章）

Question

我正在寻找一种在CSS3中制作跨浏览器，类似iPhone的徽章的方法。我显然希望为此使用一个div，但是其他解决方案也可以。重要的因素是，在所有浏览器中，它必须水平和垂直居中。

关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度（高度是固定的）-它们应该能够处理[在ascii图中]（1）和（1000），其中（1000）并不是完美的圆形，但看起来更像是胶囊。

EDIT：其他约束（摘自Steven）：

• 没有JavaScript
• 没有将显示属性修改为可疑状态的表格单元

Answer 1

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

最好将line-height设置为等于font-size（或更小），并使用填充。您必须调整身高以适应。

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

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

输出：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9TMk1yVy5wbmcifQ==” alt =“在此处输入图像描述”>

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>

Answer 2

如果您的内容高度未知，但您知道容器的高度。以下解决方案效果很好。

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

.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; 
 }

示例http://jsfiddle.net/thenewconfection/eYtVN/

一个供纽比（Newby）显示的陷阱：inline-block; [span]和[p]没有html空格，因此span不会占用任何空格。另外，我还在CSS hack中添加了针对IE的内联显示块。希望这对某人有帮助！

Answer 3

有趣的问题！尽管有很多关于水平和垂直居中div的指南，但是显然没有对居中div宽度不确定的主题的权威性处理。

让我们应用一些基本约束：

• 没有Java语言
• 显示属性没有被破坏为table-cell，支持状态令人怀疑

鉴于此，我进入争端的是使用inline-block显示属性在预定高度的绝对定位div中将跨度水平居中，以传统top: 50%; margin-top: -123px方式在父容器中垂直居中。

标记：div > div > span

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; }

来源：http://jsfiddle.net/38EFb/

---

不需要替代标记，但很可能产生比解决方案更多的问题的替代解决方案是使用line-height属性。不要这样但这是作为学术注释包括在内的：http://jsfiddle.net/gucwW/

Answer 4

这里是可以与zurb Foundation CSS框架完美搭配的扁平徽章的示例注意：您可能必须调整不同字体的高度。

http://jsfiddle.net/jamesharrington/xqr5nx1o/

魔术酱！

.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;
}

Answer 5

现代解决方案

结果是，该圆永远不会变形，并且文本在垂直和水平方向上完全停留在圆的中间。

<div class="circle">text</div>

和

.circle {
  background: #ddd;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; // or inline-flex
  align-items: center; 
  justify-content: center;
  text-align: center; 
}

简单易用。享受！