html - 在圆圈中水平和垂直居中文本

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>

方法二: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>