移動端垂直居中

問題來源：

在近期的項目中要實現圖中圓圈裏面的數字垂直居中的效果

解決思路：

• 方案1：line-height(在addroid下會出現問題)

  經過設置line-height的高度等於父元素的高度通常會達到垂直居中的效果，可是在android出現
     了問題

• 方案2：vertical-align(在addroid下會出現問題)

  通常經過將父元素設置爲display: table; 子元素設置爲 display: table-cell; vertical-
     align: middle;  也會達到居中的效果；可是屢試不爽的vertical-align在android下也不行了

---

• 方案3：transform(親測可用)

  將父元素position: relative; 或position：absolute;將要居中的子元素position：absolute;
   再將子元素的top:50%;這樣子元素就會距離頂部元素有一個父元素一半高度的距離，以後再將子元素
   往上移動其自身高度的一半，就會達到垂直居中的效果，子元素往上移動能夠用
   transform:translate(-50%,-50%)

---

**代碼示例：**

         .circle
              width 1.6rem
              height 1.6rem
              border-radius 50%
              box-sizing border-box
              background #7fb8df
              color #ffffff
              position absolute
              line-height 1
              top 0
              left -0.8rem
              z-index 1
              span
                font-size 1.2rem
                display inline-block
                position absolute
                top 50%
                left 50%
                text-align center
                transform translate(-50%,-50%)
                line-height 1