position設定した子要素がハミ出してしまう

こんにちは、nests運営です。

CSSで横の中央揃えをしたい場合に、
positionで下記のように設定する場合がありますよね。

これって、実はブラウザによって（特にIEで現象を確認）子要素がはみ出してしまう場合があるんです。

.sample {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

その場合、記述を下記へ変更しましょう。
①「left」を「right」に変更
②「transform: transrateX(-50%)」を「transform: transrateX(50%)」に変更

.sample {
    position: absolute;
    right: 50%; //<-ここを変更①
    top: 0;
    transform: translateX(50%);　//<-ここを変更②
}

※IEは2022年6月にサポートが終了するため、WebブラウザとしてのIEは2022年6月までとなります。

IEが対象から外れるので制作側からすると、少し荷が降りますね。

対処法の一つとして、現象が出た場合は試してみてください。