ブラウザのheightが狭まると上下中央揃え要素が上に行ってしまう対策

状況

これまで便利だと思い使っていたposition: absolute;による上下中央揃え…。
何気なくデベロッパーツールで画面の高さをいじっていたら、heightが狭まるにつれて要素が上へ逃げてしまう症状を確認。
具体的には、レスポンシブに無理やり上下中央揃えにしようとした結果、absoluteであるために他の要素もお構いなしに移動してしまっていた。

もしかしてと思いスマホで画面を横にしてみると…

…これは美しくない。対策をしなくては！

対策

少し力技ではあるが、特定のheightになった時にposition: static;に切り替え、margin-topを指定してやることで対策できた。

基

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

↓

height指定

@media (max-height: 400px) {
    .wrapper {
        position: static;
        transform: none;
        margin-top: 20px;
    }
}

ちなみに

数値がちょうど良くないと400pxになった途端ガクッと要素が移動して固定されるのであまり見栄えが良くない。（ブラウザのheightがなめらかに変わる状況があるのかはさておき…）
今回は手探りでちょうど良い数値を探していたが、計算できれば式に当てはめられるんだと思う。

俺はできません。