垂直和水平居中在CSS中的文字圈（如iPhone通知徽章）
我正在寻找一种在CSS3中做一个跨浏览器iPhone类徽章的方式。 我显然喜欢用这个一个div，但替代解决scheme将罚款。 重要的因素是它需要在所有浏览器中水平和垂直居中。
关于这些通知的一个有趣的devise问题是它们不能有一个指定的宽度（高度是固定的） – 他们应该能够处理[在ASCII绘图]（1）和（1000），其中（1000）不是一个完美的圆形，而是看起来更像是一个胶囊。
编辑 ：其他约束（来自史蒂文）：
- 没有JavaScript
- 显示属性不会改变为表格单元格，这是有问题的支持状态
水平对中很容易： text-align: center; 。 可以通过设置与容器高度相等的line-height来实现元素内部文本的垂直居中，但这在浏览器之间有细微差别。 在通知徽章等小元素上，这些元素更为明显。
更好的方法是将line-height设置line-height等于font-size （或稍小）并使用填充。 你将不得不调整你的身高以适应。
这是一个仅有CSS的单一的<div>解决scheme，看起来很像iPhone。 他们扩大与内容。
演示： 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>
如果你的内容的高度未知，但你知道容器的高度。 以下解决scheme工作得非常好。
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's显示一个gotcha：inline-block; [span]和[p]没有html空格，所以跨度不占用任何空间。 此外，我已经添加在CSS黑客显示内联块的IE浏览器。 希望这可以帮助别人！
有趣的问题！ 虽然有很多水平和垂直居中alignment的指南，但是对于居中的div具有不确定宽度的主题的权威性处理显然是不存在的。
我们来应用一些基本的限制：
- 没有Javascript
- 显示属性不会改变为
table-cell，这是有问题的支持状态
考虑到这一点，我进入战场是使用inline-block显示属性来水平居中在一个绝对定位的div的预定高度，垂直集中在父容器在传统的top: 50%; margin-top: -123px 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/
另一种解决scheme不需要额外的标记，但很可能会产生比解决问题更多的问题，即使用line-height属性。 不要这样做。 但是，这里作为学术笔记包括在内： http : //jsfiddle.net/gucwW/
这是一个与zurb基础的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; }
优秀的select：
演示： http : //www.codebasehero.com/files/notification-menu/demo/index.html
下载和文件： http : //www.codebasehero.com/2011/07/jquery-notification-menu/
对不起，这是自己的答案，但我是一个新手，无法弄清楚如何评论下我正在评论的答案正确的地方。 不pipe怎样：Richard Herries的答案有一个缺陷。
我不认为这是一个例外的情况下，想在一个大的“X”中作为一个closures框。 但是，当字体大小接近div尺寸时，它在Safari中不能垂直居中，并且非常明显地具有比底部更多的空间。
.center-test { width: 30px; height: 30px; text-align: center; background-color: #333; } .center-test span { height: 30px; 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; font-size:30px;} <div class="center-test"> <span></span><p>X</p> </div>
示范： http : //jsfiddle.net/5WQXF/
