How to align elements vertically, without removing element body? [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I am trying to make a LoL website, and I have a problem trying to display the list of matches, because I don't know how to align vertically the content of each match without leading to another problem. Initially, I have this
<li>
<div class="match_li lost_match">
<div class="match_li_champ">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/champion/Ekko.png"
alt="Ekko"
title="Ekko">
</div>
<div class="match_li_info">
<h3>3/13/14</h3>
<h6>ARAM</h6>
</div>
<div class="match_li_extra">
<img src="../../resources/images/lol_assets/farm_icon.png">
<h5>22<h5>
<br>
<img src="../../resources/images/lol_assets/gold_icon.png">
<h5>12838<h5>
</div>
<div class="match_li_items">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/3157.png">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/3916.png">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/1026.png">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/3089.png">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/6655.png">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/3020.png">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/item/2052.png">
</div>
<div class="match_li_spells">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/spell/SummonerFlash.png" alt="Flash" title="Flash">
<img src="https://ddragon.leagueoflegends.com/cdn/12.1.1/img/spell/SummonerBarrier.png" alt="Barrier" title="Barrier">
</div>
<div class="match_li_time">
<h4>23:20 • 2022/01/09</h4>
</div>
<div class="match_li_expand">
<h4>▼</h4>
</div>
</div>
</li>
and this CSS
.match_li {
display: flex;
flex-direction: row;
margin-bottom: 20px;
padding: 20px 30px;
color: rgba(0, 0, 0, 0.6);
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.2);
}
.match_li div {
margin-right: 40px;
background-color: lightgreen;
}
.won_match {
background-color: rgba(184, 212, 242, 0.9);
}
.lost_match {
background-color: rgba(244, 144, 144, 0.9);
}
.match_li_champ img {
display: block;
width: 80px;
border-radius: 50%;
}
.match_li_info {
width: 100px;
}
.match_li_extra {
width: 100px;
}
.match_li_extra img {
width: 20px;
}
.match_li_extra h5 {
display: inline;
}
.match_li_items {
display: flex;
flex-direction: row;
}
.match_li_items img {
display: block;
width: 40px;
height: 40px;
margin-right: 3px;
}
.match_li_spells {
display: flex;
flex-direction: row;
}
.match_li_spells img {
display: block;
width: 40px;
height: 40px;
margin-right: 3px;
}
When I try to align vertically using position and top, this happens:
new CSS:
.match_li_time {
position: relative;
}
.match_li_time * {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Does anyone know why the div body dissappears? And why does the text is contracted? Any source for better understanding of this topic would be appreciated c:

Answer 1

When you set the element to position:absolute it is removed from the normal flow so the parent is effectively empty hence the collapse. You can try using flex:
.match_li_time {
display: flex;
justify-content: center;
align-items: center;
}
More about flex here

Answer 2

Container with only position absolute children will not have width and height.
try css below on your prev version before position absolute
.match_li div {
align-items: center;
margin-right: 40px;
background-color: lightgreen;
}