文字水平居中和垂直居中的CSS

首先選擇一個須要顯示文字的選擇器，我這裏選擇的是微信小程序裏面的<view>選擇器，在其餘語言（如html）的選擇器裏是同樣的作法：

<view class="btn-item">編輯</view>

 

接下來針對 .btn-item 來寫樣式：

.btn-item{
  background-color: #fc8675;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  width: 100px;
  height: 100px;
  text-align: center;//水平居中
  line-height:100px;//控制垂直居中，要和元素高度相同
}

最後展現一下文字垂直和水平居中的效果：

 

很是簡單啦，小夥伴們本身嘗試一下吧~~

/******************************我是可愛的分割線********************************/