移动端垂直居中

问题来源：

在近期的项目中要实现图中圆圈里面的数字垂直居中的效果

解决思路：

• 方案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