css高度跟旁边一样,css 左边元素和右边元素一样高，垂直居中如何实现呢？

css 左边元素和右边元素一样高，垂直居中如何实现呢？

效果图

这个危害因素的高度要和 后面文字的元素一样高

就想这样

文字是后台传递的，所以文字多少是不可控的

现在我的样式是

.ul_one{

width: 100%;

color: #797979;

li{

background: #FFFFFF;

.div_one{//就是现在看到的每一行

line-height: 2.9rem;

height: 100%;

border-bottom:1px solid #f4f4f4;

overflow:hidden;

span{

display: inline-block;

float: left;

}

span:nth-child(1){//现在看到左边的名字

display: block;

height: 100%;

width: 30%;

background: #A6E5DA;

text-align: center;

overflow: hidden;

word-break: break-all;

}

span:nth-child(2){//现在看到右边的名字

width: 60%;

padding-left: .9rem;

text-align: justify;

float: left;

height: auto;

word-break: break-all;

}

}

}

}

我在网上搜索给 span:nth-child(1){}加了

` padding-bottom: 9999px;

margin-bottom: -9999px;

vertical-align: middle;`

可以实现为

但是怎么垂直居中呢？