特定の要素を中央に配置したいという場合のCSS記述例のご紹介です。
ブラウザを伸縮しても、常に画面(親要素)の中央に表示させることができるというものです。
特定の要素を中央配置
まずはHTML側の記述例です。
上記の要素に対して、以下のようなスタイルを適用します。
block_childの子要素に適用するCSSのポイントは以下の通りです。
●position:absoluteで絶対位置の指定
●top、left、right、bottomの各値は0
●margin:autoを指定
●widthとheightの値を指定
●top、left、right、bottomの各値は0
●margin:autoを指定
●widthとheightの値を指定
以下にデモを用意しています。
position:absoluteとmargin:autoで要素を中央配置するデモ
コメント