ホーム > CSS > CSSで上下左右中央にblock要素を配置

CSSで上下左右中央にblock要素を配置

  • 2011/06/21 10:43
  • CSS
幅、高さが固定のblock要素を画面の中央に表示する方法のメモ。
下記の図のようにネガティブマージンで上下左右中央に配置できます。



ソースはこちら。
#wrap {
  position:absolute;
  left: 50%;
  top: 50%;
  width:400px;
  height:240px;
  margin-left: -200px;
  margin-top: -120px;
}

ちなみにサンプルでは背景画像も中央に配置していますが、
配置方法のソースは以下です。
body {
  background:url(bg.gif) no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://www.satoimo18.com/archives/235/trackback
トラックバックの送信元リスト
CSSで上下左右中央にblock要素を配置 - Web Designing satoimo18+ より

ホーム > CSS > CSSで上下左右中央にblock要素を配置

検索
フィード
メタ情報

ページの上部に戻る