我们在写前端页面的时候，经常会见到一个圆中有多行文字居中的效果，那么如何实现呢，以下是代码的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圆形中心布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
.circle {
height: 200px;
line-height: 200px;
font-size: 0;
width: 200px;
background-color: red;
border-radius: 50%;
text-align: center;
color: #000;
}
/*先把一个元素设置居中*/
.circle p {
display: inline-block; /*这种写法必须*/
background-color: blue;
/*font-size: 14px;*/
}
/*//设置子元素的内容*/
.circle p span {
display: block;
line-height: 1;
font-size: 12px;
padding: 4px 0;
}
</style>
</head>
<body>
<div class="circle">
<p>
<span>打电话</span>
<span>滴滴滴</span>
</p>
</div>
</body>
</html>
思路就是最外层设置高度和line-height相等，width等于高度，字体大小设置为0，子类设置一个display:inline-block，其孙子就可以慢慢设置一些居中的文字了。这就是多行文字居中的原理哈。
