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

Question

我遇到的问题是文字没有出现在圆圈的中心，我该如何解决？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>