divをウィンドウの上下左右中央に配置する | 2GRAVITYずいぶん前から知られている技術ですが、まれに必要に迫られた時に必ず忘れているのでメモ。 divをウィンドウの上下左右中央揃えにする場合、親となるbodyに対してpositionを使用し絶対配置で配置します。 このときに指定する値はtop50%、left50%となります。これでdivの基準点が中央の指定となりますが、divの基準点は左上なのでこの位置からdivの幅の半分とdivの高さの半分のネガティブマージンでさらに位置を調整します。 実際のサンプルコードは以下の通り。 <!-- html --> <body> <div id="hoge">上下左右中央のコンテンツ</div> </body> /* css */ body { /* 省略可 */ position: relative; width: 100%; height: 100%; } #hoge { position: absolu
