问题来源:
在近期的项目中要实现图中圆圈里面的数字垂直居中的效果
解决思路:
-
方案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