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

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 &bull; 2022/01/09</h4>
                    </div>
                    <div class="match_li_expand">
                        <h4>&#9660;</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:

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

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;
}