JSFiddle - React, Tailwind, and code Playground

HTML

1.通用的情况，无需要设置自己高度，和父容器高度, 利用绝对定位只需要以下三行：

<div id="outter1">
    <div class="inner1"></div>
    <div class="inner2">
        <div>这里自适应,我不需要设定高度,也不需要知道父容器高度。</div>
    </div>
</div>

<br><br>
2.若只有父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
<div id="outter2">
    <div class="inner2">
        <div>父亲设置了高度，且只有我一个子元素</div>
    </div>
</div>

CSS

#outter1{
    position:relative;
    background:black;
}

#outter1 .inner1{
    display:inline-block;
    width:400px;
    height:400px;
    background:red;
}

#outter1 .inner2{
    background:blue;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



/********************outter 2, 知道父容器高度 400px**********************/

#outter2{
    position:relative;
    background:black;
    height:400px;
}

#outter2 .inner1{
    display:inline-block;
    width:200px;
    height:200px;
    background:red;
}

#outter2 .inner2{
    display:inline-block;
    background:blue;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}