縦横で中央に画像やボックスを配置する方法

例えば、下図のようなブロックがあったとします。縦横の大きさはどんな値でも構いません。

で、この中に中央寄せしたいボックスを配置します。ここでは、幅200px高さ150pxのボックスを作ってみました。

2つのボックスが出来たら、それぞれに「position:relative;」をCSSで設定します。で、中央寄せさせたいボックスには、「left: 50%;」と「top: 50%;」を追記してあげます。こうすることにより、親ボックスの縦横の50%の位置に子ボックスが移動します。

で、これだけだと中央にはならないので、ここから子ボックスに更にCSSを設定します。それが、「margin-top: -75px;」と「margin-left: -100px;」です(まとめて書くなら「margin: -75px 0 0 -100px;」ですね)。これ、何をしてるかというと、子ボックスの縦横のちょうど半分の値をネガティブマージンでずらしてあげる、おまじないです。そうすると、ちょうど親ボックスの縦横中央の位置に簡単に配置できるんです。

仕組みさえ理解できれば、縦横の大きさがどれだけ変わろうが、いつでも簡単に使えますよね。ただ一つだけ残念なのは、子ボックスの縦横の大きさが固定、つまりは大きさが決まってないとこの技は使えません。例えばテキストの場合はどうしても高さが固定できないので使えないです。まぁ、それでも知っておいて損はないTIPSですけどね。