高さ不定垂直中心

プロジェクトの中で1つのポップアップボックスのコンポーネントに出会って、コンポーネントの幅は固定して、しかし高さは固定しないで、それが全体のスクリーンの中間に位置することを望んで、簡単な1つの設計に見えますが、意外にも垂直に中央に位置するこのブロックはとても大きい面倒に出会って、最後に多方面を通じて比較して、1つの比較的に適当な方案を得ました

.radio_selector ul {
    width: 20rem;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 1rem;
    transform: translateY(-50%);
    overflow: hidden;
}

キーコードは次のとおりです.

position: absolute;
top: 50%;
transform: translateY(-50%);