HTMLにおける要素の水平・垂直方向の中央配置に関する考察

ページをデザインするとき、ログインウィンドウを中央に配置するなど、DIVを中央揃えにして、ページウィンドウに対して水平方向と垂直方向に配置したいことがよくあります。

これまでにも、さまざまな方法が検討されてきました。

HTMLです。

レンダリング（以下の方法は同じ効果イメージです）。

<イグ

1つ目は CSS絶対位置指定

主に絶対位置指定で、あとはmarginで真ん中に調整する。

親要素です。

子要素です。

水平・垂直方向のセンターアライメント。

2つ目：CSS絶対位置指定＋Javascript/JQuery

主に絶対位置指定を使用し、Javascript/JQueryで中間位置に調整する。この方法は、最初の方法と比較して、クラスの柔軟性を向上させます。

親要素です。

子要素です。

水平・垂直方向のセンターアライメント。

JQueryです。

第3回：CSS3絶対位置決め＋変位

CSS3のtransform: translateを使った絶対位置指定でも同じ効果が得られます。

親要素です。

子要素です。

水平・垂直方向のセンターアライメント。

タイプ4：Flexbox。[ストレッチレイアウトボックスモデル］

要素を水平・垂直にするのは、Flexbox モデルでは簡単すぎる。

ここはHTMLを変更する必要があるだろう。

親要素です。

子要素です。

水平・垂直方向のセンターアライメント。

いくつかの方式を比較したものです。

最初のCSS絶対位置決めマージン調整は、非常に親和性が高いが、柔軟性に欠ける。縦横の中央揃えが必要なボックスがたくさんある場合、幅と高さが異なるので、それぞれ別の.align-centerを書く必要があります。
2つ目はスクリプト言語を使用するもので、親和性が高く、1つ目の欠点を補うことができます。幅や高さの変化による水平・垂直方向のセンタリングの効果に影響を与えません。
3つ目は、CSS3のいくつかの新しいプロパティを使用し、IE10、Chrome、Firefox、Operaに対応していますが、互換性が低く、幅、高さの変更による水平・垂直方向の中央揃え効果に影響を与えません。
Flexboxモデルを使用、Firefox、Opera、Chromeに対応、IEは全滅。また、幅や高さが変わっても水平・垂直方向の中央揃えに影響しません。

今回の記事は以上です。お役に立てれば幸いです。