uniapp 入门实战 10：利用 css 实现文字居中在圆中心

实现

.circle {
  background: gold;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

效果

总结

• 需要固定宽高，否则会导致文字被压扁

参考文献

• https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific
• https://www.codegrepper.com/code-examples/css/circle+css+with+text+in+the+center