• RSS

[CSS]position:absoluteとmargin:autoで要素を中央配置する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

特定の要素を中央に配置したいという場合のCSS記述例のご紹介です。

ブラウザを伸縮しても、常に画面(親要素)の中央に表示させることができるというものです。

特定の要素を中央配置

まずはHTML側の記述例です。

上記の要素に対して、以下のようなスタイルを適用します。

block_childの子要素に適用するCSSのポイントは以下の通りです。

●position:absoluteで絶対位置の指定
●top、left、right、bottomの各値は0
●margin:autoを指定
●widthとheightの値を指定

以下にデモを用意しています。
position:absoluteとmargin:autoで要素を中央配置するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください