【HTML, CSS】要素を上下中央どころか「ど真ん中」に配置するコツ

要素を上下中央どころか「ど真ん中」に配置するコツ

以前の記事で、「vertical-alignを使えば上下中央に配置できるでしょ?」というとんだ勘違いについて書きました。

【HTML, CSS】vertical-alignの使い方を勘違いしていた...

2019.01.06

要は以下のような配置を実現したかったのです。

translateで原点位置を調節

初心者にとっては、外側のボックスの上下中央に内側のボックスを配置するのは、左右中央に配置するよりやっかいでしょう。
左右中央ならmargin:0 auto;とかtext-align: center;とかで一発ですが、上下中央って難しくないですか?

もちろん方法は複数あるのですが、ここではabsoluteを使って上下中央どころかど真ん中に配置する方法を書きます。

topとleftを50%に設定する

topとleftを50%にされた要素は、その親要素の領域の高さ50%と左右50%に移動します。

というわけで、以下のHTMLとCSSを書いてみます。

基本的にはabsoluteを指定した要素の親要素にはrelativeをつけておきましょう。
これを忘れると思ってもいない位置に移動してしまします。

outer-boxクラスの中にinner-boxクラスがど真ん中に配置されるでしょう。
結果を見てみます。

translateをつけていない

めっちゃずれました。なぜでしょう?

原因は、要素の原点はボックスの左上の頂点だからです。

上の画像の内側ボックスの左上の頂点をじーっと見てみると、たしかに外側ボックスのど真ん中にきているように見えませんか?
topやleftなどで指定する値は、要素の原点を初期位置からどれだけ動かすのかを指定しているのです。

transformで小細工する

このままでは少し不便なので小細工を加えます。
それは、absoluteをしているinner-boxクラスにtransformプロパティを指定します。

以下のようにinner-boxクラスのCSSを書き換えます。

書き換えたと言ってもtransform: translate(-50%, -50%);を加えただけです。

transformプロパティに指定できる値はいくつかあるのですが、ここではtranslateを指定します。
translateを使うと、要素の原点を移動させることができます

現在は要素の原点は左上の頂点にあります。これがデフォルトです。
translateを指定して、要素の原点を要素の中心に移動させます

translateの引数をふたつ指定しています。
ひとつ目の引数には横方向の移動距離、ふたつ目には縦方向の移動距離を指定します。

ともに-50%を指定すると、原点が要素の中心に移動します。

新たにtransformを指定したCSSを適用してブラウザで表示してみます。

translateで原点位置を調節

これでど真ん中に配置されました。

まとめ

最近ではflexboxを使う方法が流行っています。
たしかにめっちゃ便利なのですが、fleboxはIEでは微妙なので頼りすぎるのも考えものです。

まぁ、flexboxでもなんでも自分がこれだと思った方法にたくさん出会いたいものです。