html span字体居中,在不知道span标签的高度之前怎么让span内的文字垂直居中？

尝试用vertical-align：middle，line-height：50%，但是不行

html代码：

top

right

left

bottom

css代码：

cliBtn{

width: 100%;

background: #ccc;

margin: 1rem auto;

position: relative;

}

cliBtn:after{

content: '';

display: block;

padding-bottom:100%;

}

cliBtn a{

position: absolute;

width: 50%;

height: 50%;

box-sizing: border-box;

border: 1px solid #333;

}

cliBtn a:nth-child(1){

top:0;

left:0;

border-top-left-radius: 100%;

}

cliBtn a:nth-child(2){

top:0;

left:50%;

border-top-right-radius: 100%;

}

cliBtn a:nth-child(3){

top:50%;

left:0;

border-bottom-left-radius: 100%;

}

cliBtn a:nth-child(4){

top:50%;

left: 50%;

border-bottom-right-radius: 100%;

}

cliBtn a:nth-child(2n){

background: #ffff99;

}

cliBtn a span{

display: block;

width:100%;

height: 100%;

text-align: center;

vertical-align: middle;

line-height: 100%;

}

效果图：