(HTML,CSS)ボックスをウインドウの中央に配置する方法1つのボックスをウインドウの中央に表示させる方法をご紹介。左右方向だけでなく上下方向にも中央に寄せて、ウインドウ(表示領域)の中心にボックスを配置させる方法です。スタイルシートで簡単に実現できます。文宏ホームページ作成ガイド上下方向にも左右方向にも中央に寄せるボックスをウインドウの中央に配置(上下・左右方向共に中央に表示)ボックスを左右方向の中央に寄せる(センタリングする)には、スタイルシートのmarginプロパティを使って、値を「auto」に設定すれば実現できます。その方法では左右方向には中央に寄りますが、上下方向には中央には寄りません。(上下のマージンはゼロになるだけです。)上下方向にも左右方向にも中央に寄せて、ボックスをウインドウの中心に表示させたい場合にはどうすれば良いでしょうか。今回は、その方法をご紹介いたします。スタイルシートを使えば、簡単に実現できます。ウインドウの中央にボックスを配置するサンプル今回ご紹介する方法を使えば、下図のようにウインドウサイズを変化させても、ボックスは常にウインドウの中心に表示されるようになります。ウインドウサイズを変化させてもボックスは中心に表示される実際にお使いのブラウザで試してみたい場合は、以下のサンプルページを表示させてみて下さい。ボックスをウインドウの中央に配置する方法(サンプルページ)このように、ボックスをウインドウの中央に配置する表示は、スタイルシートで8つのプロパティを使うことで実現できます。具体的なソースは、次のページでご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。