将文本水平和垂直居中放置在圆圈中

Question

我有一个问题,文本没有出现在圆圈的中心,我该如何解决？

#indexClient {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 30px;
  color: yellow;
  line-height: 20px;
  text-align: center;
  background: #99CCCC
}

<div id="indexClient">
  <p>Client Side</p>
</div>

Answer 1

方法1:line-height同样的height技巧

(适用于单行文本).

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 30px;
  background: #9cc;
  line-height: 150px;
  text-align: center;
}

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

方法2:line-height+inline-block

(适用于单行和多行文本).

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 30px;
  background: #9cc;
  line-height: 150px;
  text-align: center;
}

.circle span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  padding: 0 25px;
}

<div class="circle">
  <span>Test Long Item</span>
</div>

方法3:使用CSS table+table-cell

(适用于单行和多行文本).

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 30px;
  background: #9cc;
  text-align: center;
  display: table;
}

.circle span {
  display: table-cell;
  vertical-align: middle;
  padding: 0 25px;
}

<div class="circle">
  <span>Test Long Item</span>
</div>

方法4:使用CSS3 transform

(适用于单行和多行文本).

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 30px;
  background: #9cc;
  text-align: center;
  position: relative;
}

.circle span {
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="circle">
  <span>Test Long Item</span>
</div>