position:absolute した要素をセンタリング（中央配置）にする方法

ウェブサイトを作っていれば結構な頻度で利用する position:absolute です。ぼくはヘッダーやメインビジュアルエリアなどでよく使うかな。

その position:absolute 指定した要素をセンタリングさせるには、通常の margin:0 auto や text-aligin ではできないので、今回はそのやり方をメモします。

position:absolute の使いどころ

position:absolute は、その要素に対して、絶対にその位置にいなければならない。他に要素があっても重なったとしても絶対にそこにあらねばならない…そんな絶対指定の CSS。

スライダーのメインビジュアルに被せるようにテキストを position:absolute で指定したり、ヘッダーの項目を froat 分けして配置するよりも position:absolute の方が楽だし・・・まあまあ使い所は沢山あります。

そんなまあまあ便利な position:absolute 指定要素をセンタリングさせる方法は以下。

img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 200;
}

img {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

z-index: 200;

}

中央揃えさせたい要素に対して、「top, right, bottom, left」を値「0」で、margin「auto」にしてあげるだけで中央揃えになります。

重なり方を調整するのに z-index + 値を記述します。

たったこれだけです。

See the Pen JBwjqX by ak (@tankichi) on CodePen.

HTML ドキュメント内に画像だけを配置して、それを position:absolute し、中央配置になるように記述しています。

これは例として画像で行いましたが、テキストでもボックス要素でも大丈夫です。

因みに left:0; だけ削除すると右寄せになります。