如何垂直居中具有较高同级元素的元素?

Question

在这个例子中，我想在"list-li"元素中垂直居中"3"，因为同级元素具有动态高度。我尝试使用：

position: relative;
top: 50%; 

..但它似乎不起作用。

.HTML：

<ul class="list-1">
<li>
<div class="list-1-num">
3    
</div>
<div class="list-1-content list-1-content-signup">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, lectus cursus cursus elementum.
</div>
</li>
</ul>

.CSS：

.list-1 {
font-size: 20px;
list-style: none;  
}
.list-1 li {
margin-bottom: 70px;
overflow: hidden;
text-align: left;
list-style: none;
}
.list-1-num {
float: left;
font-size: 25px;
margin-right: 20px;
}
.list-1-content {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 45px 40px;
float: left;
width: 300px;
line-height: 25px;
}

代码笔演示：https://codepen.io/aguerrero/pen/OZevgJ

Answer 1

您可以使用Flexbox而不是float并在父级上设置align-items: center。

.list-1 {
font-size: 20px;
list-style: none;
}
.list-1 li {
margin-bottom: 70px;
overflow: hidden;
text-align: left;
list-style: none;
display: flex;
align-items: center;
}
.list-1-num {
font-size: 25px;
margin-right: 20px;
}
.list-1-content {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 45px 40px;
width: 300px;
line-height: 25px;
}

<ul class="list-1">
<li>
<div class="list-1-num">
3
</div>
<div class="list-1-content list-1-content-signup">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, lectus cursus cursus elementum.
</div>
</li>
</ul>