CSSのposition:absoluteで上下はピクセル指定しつつ、左右はきっちり中央揃えにするコツ

CSSのposition:absoluteを使って位置ぞろえをする際に、ピクセル指定とパーセント指定を組み合わせた場合に思った位置からちょっとずれてしまったことがありました。

具体的には「下から10pxの位置で左右中央寄せ」をやろうと思ったら、やや右側に寄ってしまってたんですね。

これを解決する方法を見つけたのでご紹介します。

position:absoluteを使って中央揃えしたいのにずれる場合がある

例えば「画面の真ん中にテキストをデカデカと表示させたい」という場合、上下左右で中央寄せしたりしますよね。そんな時はdisplay:flexを使った方法が便利です。

ただ、「position:absoluteを使って上下数ピクセルの位置に配置したものを、左右では中央寄せする」という時に、左右の中央寄せが意外とうまくいかなかったんです。

その時のソースがこちらです。位置ぞろえに必要なものだけを記述した簡易版ですが、「下から10pxの位置に、左右中央寄せして配置」できるように書いたつもりでした。

<div class="contents-frame">
  <p>中央にテキストを設置</p>
</div>

.contents-frame {
  position: relative;
}
.contents-frame p {
  position: absolute;
  left: 50%;
  bottom: 10px;
}

左から50%としたときに、若干右側にずれるんですよね。

というわけで、このちょっと右側にずれる現象を1行追加するだけできっちりとした中央寄せにします。

先ほどのソースに、cssに最後の1行を追加します。

<div class="contents-frame">
  <p>中央にテキストを設置</p>
</div>

.contents-frame {
  position: relative;
}
.contents-frame p {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 0);
}

translate(-50%, 0)の左側の数字がX軸(横方向)、右側の数字がY軸(縦方向)の数字です。

left: 50%;の対となるようにtranslate(-50%, 0)を記述してあげることで、左右きっちり中央寄せが実現できます。

そうやって左右中央寄せしたものがこちらの下にある矢印アイコンです。しっかりと中央に配置できました。

上下左右中央寄せをする場合はdisplay:flexが便利ですけども、上下だけはピクセル指定したいという場合には今回紹介した方法がおすすめです。

どちらも便利なので、状況に応じてどちらも使えるようになっておくと良いと思いますよ。