ホームページ作成/ボックスや枠線の表示・装飾 (HTML,CSS)

ボックスをウインドウの中央に配置する方法

1つのボックスをウインドウの中央に表示させる方法をご紹介。左右方向だけでなく上下方向にも中央に寄せて、ウインドウ(表示領域)の中心にボックスを配置させる方法です。スタイルシートで簡単に実現できます。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

上下方向にも左右方向にも中央に寄せる

上下左右でセンタリング。ウインドウの中心に寄せて表示。
ボックスをウインドウの中央に配置
(上下・左右方向共に中央に表示)

ボックスを左右方向の中央に寄せる(センタリングする)には、スタイルシートのmarginプロパティを使って、値を「auto」に設定すれば実現できます。
しかし、その方法では左右方向には中央に寄りますが、上下方向には中央には寄りません。(上下のマージンはゼロになるだけです。)

上下方向にも左右方向にも中央に寄せて、ボックスをウインドウの中心に表示させたい場合にはどうすれば良いでしょうか。
今回は、その方法をご紹介いたします。スタイルシートを使えば、簡単に実現できます。

ウインドウの中央にボックスを配置するサンプル

今回ご紹介する方法を使えば、下図のようにウインドウサイズを変化させても、ボックスは常にウインドウの中心に表示されるようになります。

ボックスをウインドウの中央に配置:ウインドウサイズを変化させてもボックスは中心に表示される
ウインドウサイズを変化させてもボックスは中心に表示される

実際にお使いのブラウザで試してみたい場合は、以下のサンプルページを表示させてみて下さい。
ボックスをウインドウの中央に配置する方法(サンプルページ)

このように、ボックスをウインドウの中央に配置する表示は、スタイルシートで8つのプロパティを使うことで実現できます。 具体的なソースは、次のページでご紹介いたします。

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます