需求：使用html画一个圆，圆中有个字进行说明，并且使字居中。
分析：首先画圆，我第一个想法是用图片，，被骂了一顿，然后想难道用canvas画，又被骂了一顿，这才注意到CSS存在一个属性border-radius。
border-radius本来是用于为div添加圆角，参数为*px或百分比，而这个值是指圆角的半径（想象一下，圆角嘛，肯定是以某个点为中心，某个点为半径来画的，而在四个角上，有了半径，实际上就不再需要再指定圆心了）。所以扩展一下，如果指定的参数值大于等于div的宽度，那么画出的东西应该为一个圆。
试一下：
<!doctype html>
<html style="height:100%">
<head>
<title>圆内包含字</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#nouse{
height: 50%;
margin-bottom: -150px;
}
#circle{
width: 300px;
height: 300px;
border-radius: 150px;
margin:auto;
background-color: red;
border: solid 1px;
}
</style>
</head>
<body style="height:100%">
<div id="mainBody" style="height:100%">
<div id="nouse">
</div>
<div id="circle">
</div>
</div>
</body>
</html>效果图如下：
OK，现在我们得到了一个圆，而且这个圆恰好位于屏幕中心（代码看上面内容），那如何在圆上添字呢？可能最直接的方式就是在div内部直接写字，通过使用text-align将文本居中，但是此时并没有位于圆的中心，而只是位于字所在文档流的中心，那么如何使字定位在圆的中心地位，换句话说，如何垂直居中呢？
答案是使用line-height，line-height简单的说就是设置行高。因为在原来的文档流中，行高正好是字体的大小，那如果行高设为整个圆的高度会怎么样？很自然的，字体将会位于该行的中心，这样就达到了垂直居中的目的。
代码如下：
text-align:center;
line-height:300px;
font-size:30px;
还有个有趣的问题，我们设置的圆的直径为300px，实际画的图的直径却不是300px，知道为什么吗？
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
