ウェブページ全体を中央配置にするのはいとも簡単にできるが、落とし穴もあることの忘備録。
全体を position:relative; にし、中央配置する要素（id=container）を position:absolute; にする。これによって container の上下位置と左右位置を指定できるようになる。そして container をビューポートの高さ・幅の半分だけ下・右へ移動し、要素の高さ・幅の半分だけ上・左へ移動する。 HTML <div id="container"> （container の html を記述） </div> CSS（container の幅が1010px、高さが760pxの場合） html { position: relative; } #container { position: absolute; margin: 0; margin-top: -380px; margin-left: -505px; top: 50%; left: 50%; width: 1010px; height: 760px; } ところが、これでウインドウをどんどん縮めていくと、ページの上下左右が隠れてしまう。隠れた部分にナビゲーションなどがあるとアクセスできなくなる。
そこで、上の css の top と left を次のように変更する。 top: 50%; → top: max(50%,380px); left: 50%; → left: max(50%,505px); max 関数は２つの因数のうちどちらか大きいほうを選択してくれる。上記で left はビューポートの幅の半分と505pxのうち大きいほうに設定される。つまり、ウインドウを縮めていってビューポートの幅が1010px未満になっても left は505pxにキープされる。そして、margin-left: -505px; としているので、要素は画面の右端ぴったりに表示される。
なお、max、min、clamp 各関数はほとんどのブラウザでサポートされているが、IE11 ではサポートされていない。