position:absoluteを使うと基準値に対して要素の絶対配置ができるようになるので グラフィカルなWebページを作るときに結構必須になってくるCSSプロパティです。

基本的には上下左右のプロパティを駆使して位置を設定していくのですが、 どの画面サイズでもボックスの中央に置きたい場合、絶対数値で指定するとうまくいかないです。

今回は絶対配置での中央配置を2パターン紹介したいと思います。

お好みで使い分けてください。

marginを利用する中央配置方法

私が結構使ってた手法としては、marginのatuoを使った手法のご紹介です。

.parent {
  width:200px;
  height:200px;
  background-color:#999;

  position:relative;
}

.child {
  width:50px;
  height:50px;
  background-color:#f00;

  position:absolute;

  top:0;
  right:0;
  bottom:0;
  left:0;

  margin: auto;
}

ちなみにHTMLは以下の感じです。

<div class="parent">
  <div class="child"></div>
</div>

位置プロパティの０の解説

親divを基準として上下左右の位置を０と設定しています。

absoluteを使う時、基本上下左右のプロパティを全部使うことっていうのは無いのですが 中央配置する場合は今感じにすべてのプロパティを使います。

数値が０ということは、親と子の距離が０だということはおわかりになると思います。

しかし上下・左右と対角線上の数値が０ってどういうことなの？ っていう疑問が湧いてくるかなと思います。

親の幅と高さが違うのに上下左右ピッタリひっつくなんて物理的に考えるとまず無理ですよね。

ここで「margin:auto」が活躍してきます。

ちょっと文字で説明するのが難しいのですが、 margin全方向をautoにするとブラウザ側がいい感じにボックス間の空白を均等にしてくれます。

シンプルでわかりやすい書き方なのですが、なんかどうも気持ち悪い書き方だなって思ってました。

絶対配置の要素を中央配置したいときによく使ってたのですが、 もう１つの方法を知った時、ソッチのほうがしっくり来るなと思って 最近はこの方法を使わなくなりました。

余談ですが、margin:autoはボックスの幅が画面サイズによって変化させたい場合に 水平方向に中央寄せしたいときに「margin:0 auto」で左右だけautoにしてやることが多いですね。

transformを利用する中央配置方法

上下左右の位置配置プロパティは基本対角線上の要素を使わないのが基本なので、 次に紹介する方法は左と上の値を設定して後はtransformで位置を補正するといった手法になります。

.parent {
  width:200px;
  height:200px;
  background-color:#999;

  position:relative;
}

.child {
  width:50px;
  height:50px;
  background-color:#f00;

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  /* ※こっちでも一応同じ動き
  top:25%;
  left:25%;

  transform:translate(50%, 50%);
  */

}

まず左と上の位置をそれぞれ親に対して50％移動させます。

その後、transformプロパティのtranslateを使って動かした分を補正すると いい感じに中央に配置されます。

左右だけとか上下だけとかの場合はそれぞれの値を０か指定なしにすればOKです。

簡単に動作を説明すると、まず上と左を親ボックスを基準に50％移動させます。

この時点で子ボックスの左上が親ボックスの中心に位置してるのでこのままだと中央とは言えません。

子の中心を親の中心と同じにしたいわけなので、次はtransformプロパティを使って 現在位置から自分のサイズ分-50%移動させるときれいに中央に移動してくれます。

コメントアウトしてますが親から25%ずらして自分基準で位置を50%動かすのもOKです。

数値が50と-50できれいなので私は今適用しているものをメインで使ってますね。

お好みで使って大丈夫です。

最近のブラウザなら大丈夫とは思いますが、1つ目のmargin:autoで自動調整するというのはもしかすると、 環境によってはうまく自動で動かしてくれない可能性があるかもしれないので、 2つ目のやり方のほうが確実に中央に寄せてくれるんじゃないかなと思ってます。

transformの方を使う場合、-moz-とか-webkit-とかのベンダープレフィックスをつけないと ブラウザごとに動かないかもしれないので気をつけてください。

Sassとかを使わない場合だとmargin:autoの手法のほうがいいのかも知れません。

1つだけ知っておくというよりも、状況に応じて使い分けられるようにしておいたほうが 何かあったときに役に立つと思います。

もし誰かが書いたコードを見たときに何をしているのかわかるのとわからないのでは 作業効率がかなり変わってくるので、できるだけ手法を多く知っておきましょう。

全員が全員transformの方法で中央寄せをしているとは限らないからですね。