【CSS】position を使ったセンタリング方法

Web

Web ページを作っていて、
『センタリングしないとなぁ』ってなるときに、漠然と何種類かのセンタリングする方法が頭に思い浮かびます。

そしてはたして、
そのやり方でちゃんとセンタリングできるのか？と。。。横軸のセンタリングはなんとなくmargin: 0 auto;でイケる感じで、でも問題なのは、縦軸！

vertical-align: middle;？？text-align: center; ？？というスタイルがおぼろげながら浮かんでくるわけなのですが……。『これって絶対効かないよなぁ……』とか思いながら、とりあえず入れてみたりして、やっぱり使えなかったりして。。

そんなふわりとした考えで時間をとられ、嫌気がさし、もっとバシッとセンタリングを決めたい！と思い、今回の記事をまとめてみようと思いました。

縦軸のセンタリングには
position を使うのが
“それっぽい”気がする。

縦軸に対してセンタリングするにはどうすれば良いか。

例えば、とあるボックス内にテキスト何行かをボックス内の縦に対して真ん中にしたいとします。個人的には、position を使用したセンタリング方法が、一番“それっぽい”気がします。

<div class="box">
  <p class="text">てきとうなテキストを何行かセンタリングしてみたい。ああああああああああああああああああああああああああ<p>
</div>

このようなコードを例に見ていきたいと思います。

まず、
親ボックス（.box）にposition: relative;、センタリングしたい要素（.text）にはposition: absolute;を設定しておきます。

.box{
  position:relative;
  width: 300px; /*任意のサイズ*/
  height:250px; /*任意のサイズ*/
}
.text{
  position:absolute;
}

そして、
センタリングしたい要素（.text）の“位置指定”のプロパティを設定します。まとめるために順番に縦（Y）軸から見ていけたらと思います。

①センタリングしたい要素の上辺を真ん中にする

センタリングしたい要素（.text）にtop: 50%;を設定する　ことで、上辺が親ボックス（.box）の“トップ”から縦軸に対しての 50% の位置で表示されます。

.box{
  position:relative;
  width: 300px;
  height:250px;
}
.text{
  position:absolute;
  top:50%;
}

②センタリングしたい要素の半分、上にズラす

センタリングしたい要素（.text）にtransform: translateY(-50%);を設定することで、センタリングしたい要素（.text）自身の半分上（-50%）にズラすことができます。

.box{
  position:relative;
  width: 300px;
  height:250px;
}
.text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

top: 50%;は親ボックスに対しての位置指定で、transform: translateY(-50%);は要素自身の“変形”なので、別物であるというマインドで考えると良いです！

なんだかうまくセンタリングされないときは？

各ブラウザのデフォルト設定の CSS で、margin や padding、line-height などが影響しているかもしれませんので確認してみましょう！

同様の考え方で、
X軸にもスタイルを設定することで、縦横でセンタリングを実現することが可能です！

はじめのうちは混乱してしまうかもしれませんが、何度もやっているうちに簡単に理解できるようになるとおもうので、ぜひ自分でもコーディングしてみてください！

ちなみに
transform: translateX(-50%);とtransform: translateY(-50%);は、transform: translate(-50% , -50%);という感じで合わせて記述することが可能です。最初に記述する方がX軸で、後がY軸です。

See the Pen センタリング by MATSUDAI (@matsudai) on CodePen.

position プロパティを使用して
センタリングをするメリット

いろいろなセンタリング方法がありますが、今回は position プロパティを使用したやり方をまとめてみました。では、position プロパティを使用することに関してメリットを考えてみます。

微調整ができる！

『視覚的にもう少し上だと、いいのだけれどなぁ』ってことありますよね？そんな時ちょっとだけ上にズラすということが容易に、そして直感的にできます。

top プロパティまたは transform プロパティの値を調整すると微調整ができますね。どちらの数値で調整するかはきちんと統一しておかないとそれはそれでわかりづらくなってしまうので要注意！個人的にはtop プロパティは固定で、transform で微調整したいです。個人的に。

直感的でわかりやすい！

センタリングと言えば、「Flexbox」というものありますが、「Flexbox」は並び方を制御するさまざまなプロパティがあり、少し難しいかもしれません。センタリングするだけなら数行のスタイルで済みますが、いろいろなことを考慮すると、やや直感性に欠けるような気がします。

それに比べて、position プロパティでのセンタリングはコードを見ただけで「センタリングしたいんだなぁ」ということが読み解けますよね！

fixed や sticky で、少し変わったレイアウトも！

position プロパティを使用するセンタリングは、親要素に対して設定される position プロパティが、position: relative;だけではなく、実はpositon: absolute;やposition: sticky;でも有効です。これにより「Flexbox」では実現が難しい少し変わったレイアウトを実現することが可能です。ただし position プロパティの管理が複雑になる場合があるのがデメリットでもあります。

ちなみに

縦を「position プロパティのセンタリング方法」でやって、横は勝手知ったるmargin: 0 auto;でセンタリングすることはできないものか。浅はかながら思ったわけです。

当然、そのまま記述してもできないわけで。。。

しかし、いろいろネットで調べていると、
要素の幅を設定した上で、左右の位置指定プロパティを０にすることで、なんとmargin: 0 auto;によるセンタリングが可能になるようです！（位置指定プロパティは０じゃなくても同じならセンタリング、違う数値であればその分ズレるようです。）

さらに驚くことに、このやり方だと縦に対しても有効ということ！

margin:0 auto;ではなく、margin:auto;にするのを忘れずにね！

実際に使う出番は少ないと思いますが、知識として面白いのでぜひ遊んでみてください！

まとめ

要素をセンタリングするのに position を使用した方法があります。特に縦軸に対するセンタリングを直感的に設定できるのでおすすめ！

センタリングしたい要素にposition: absolute;とtop: 0;、left: 0;などで位置指定と、要素自身の変形でtransformプロパティを組み合わせることでセンタリングを実現します。親要素にposition: relative;の設定を忘れずに！

トップへ戻る