CSSの position: absolute を使った中央配置テクニック！

position: absolute; とは？

CSSのposition: absolute;を使うと、要素を通常の流れを無視して自由に場所を決めて配置できるようになります。
しかし、position: absolute;を指定した要素は、基準となる要素が何かによって配置が変わるため、正しく使わないと意図しない位置に表示されてしまうことがあります。

position: absolute; の基準はどこ？

position: absolute;を指定すると、その要素は 「直近のposition: relative;を持つ親要素」を基準に配置されます。もし、親要素にposition: relative;が設定されていない場合は、（ブラウザの表示領域全体）が基準になります。

シンプルな中央配置の方法

さっそく、実際に要素を中央に配置する方法を詳しく解説します。

上下左右の完全中央配置

See the Pen css-position-center3 by webmagic-lab (@kkindchy-the-selector) on CodePen.

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

完全に中央に配置するには、top: 50%; left: 50%;とtransformを組み合わせます。
top: 50%; left: 50%;で要素の左上にある基準が中央に配置され、translate(-50%, -50%);で要素の基準を要素の高さの半分、幅の半分の分移動させます。

上下中央配置（垂直方向）

See the Pen css-position-center1 by webmagic-lab (@kkindchy-the-selector) on CodePen.

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

top: 50%;を指定すると、要素の上端が高さの中央に配置されます。
transform: translateY(-50%);を使って、要素の高さの半分だけ上にずらし、完全な上下中央配置に修正します。

左右中央配置（水平方向）

See the Pen css-position-center3 by webmagic-lab (@kkindchy-the-selector) on CodePen.

.child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

left: 50%; だけでは、要素の左端が中央に配置されてしまうので、transform: translateX(-50%);を使って修正します。

position: absolute; を使うときの注意点

親要素のposition: relative;を忘れがち

position: absolute;を指定する場合、親要素にposition: relative;を付けないと、意図しない位置に配置される可能性があります。

width と height の設定も考慮する

中央配置する要素の幅や高さが変わると、位置がずれることがあります。特に、レスポンシブデザインでは注意が必要です。
例えば、可変幅の要素を中央に配置する場合、max-widthやmin-widthを考慮すると良いでしょう。

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
}

transform を使わない方法（marginを使う方法）

margin: auto;を使っても中央に配置できますが、position: absolute;の場合はtopとleftを 0 にする必要があります。

この方法はtransformを使わずに中央配置できますが、widthとheightが必須になります。

.child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}