iOS でスクロールを完全に無効にする

デスクトップや Android の場合, CSS を以下のように設定するだけでスクロールを無効にできます.

html, body {
    height: 100%;
    overflow: hidden
}

しかし, iOSでは, 上記の CSS の設定だけでは, わずかながらにスクロールできてしまいます.
iOS でスクロールを完全に無効にするには, JavaScript による制御も必要です.

    window.addEventListener('touchmove', event => {
        event.preventDefault();
    }, true);

CSS position: fixed で センタリングする 2

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

センタリングしたい要素のサイズがわからない場合は, さらにやっかいです.

しかし, 方法はあります.

<div style="position: fixed; z-index: 1; width: 100%; text-align: center;">
    <div style="display: inline-block; padding: 0.75em 1em; font-size: 12px; color: #fff; background-color: #999;">Fixed</div>
</div>

ポイントはセンタリングしたい要素を囲むブロックに対して, 以下の3つのスタイルを定義することです.

position: fixed;
width: 100%;
text-align: center;

あとは, センタリングしたい要素を inline-block にするだけです.

Fixed

CSS position: fixed で センタリングする 1

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

しかし, 要素のサイズ (width と height) がわかっている場合, left と margin-left を利用することでそれを解決できます.

ポイントは2つです

left: 50&;
margin-left: -(ブロックの width の 1/2)  /* ネガティブ margin */
Fixed