问题来源：

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

解决思路：

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