意外と厄介なポジションプロパティ（position: absolute;）で可変する要素を上下中央寄せする方法は？

今回は簡単そうに思えて意外と厄介「position: absolute;」で場所指定した可変する要素を
上下中央寄せする方法について解説していきますので、ぜひ参考にしてみてください。

「position: absolute;」 で中央寄せする方法は？

まずはこちら。
不可変要素を中央寄せする方法なのですが、

See the Pen
PooQKEY by sank (@sank_f)
on CodePen.

こんな感じですよね。

解説していきますと、

不可編要素なので、height、width 指定ができます。

上下中央寄せの指定ですが、まずは

で、.center_areaの中心に要素の右上が来るようになりました。

図にするとこんな感じですね。
なので、あとは height、width の半分を、

ネガティブマージンで指定してあげればちょうど真ん中に指定できました。

さて、ここまではできますよね。
わたしが思わずハマってしまったのは、
上下中央寄せにしたい要素が可変の場合はどうするかという問題でした。

テキストなど可変要素を上下中央寄したい場合は？

ただのテキストであれは、
そのwidthとheightを調べることで上下中央寄せが可能ですが、
そうすると、例えばテキストを変更したいというときにいちいち修正しないといけません。

それは面倒なので、常に中央寄せにする方法はないかと探した結果、ありました。

という使い方。

これを使えば、不規則な高さや不規則な幅の要素も上下中央寄せできますので、試してみてください。

先ほどの例で実行すると、

▽まずは幅が 100px の時（先程同じ状況）

See the Pen
KKKoRyV by sank (@sank_f)
on CodePen.

▽次に幅が 200px の時

See the Pen
LYYdmed by sank (@sank_f)
on CodePen.

▽最後にテキストで幅が不規則に変化する場合

See the Pen
RwwMJpw by sank (@sank_f)
on CodePen.

どれもネガティブマージンを使うことなく、
すべて同じプロパティと値で上下中央寄せできていることがわかると思います。

なので、今後はネガティブマージンではなく、
汎用性のある transform: translate(-50%, -50%); を使ってみてはいかがでしょうか。

なお、css3が使えない場合は、このプロパティを使うことができないので注意してください。
まあ、そんな状況はあまりないと思いますが。

はメニューのスライドなどにも使えるので便利ですよ。

わたしのポートフォリのメニューボタンでも使用しているので、ぜひ参考にしてみてください。

ポートフォリオサイト