HTML における要素の水平および垂直中央揃えに関する議論

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

これまで、多くの方法が検討されてきました。

HTML:

効果図 (以下の方法は同じ効果図を持ちます):

1つ目: CSS絶対位置指定

主に絶対位置を使用し、マージンを使用して中央の位置に調整します。

親要素:

子要素:

水平および垂直の中央揃え:

2番目の方法: CSS絶対位置指定 + Javascript/JQuery

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

親要素:

子要素:

水平および垂直の中央揃え:

JQuery:

3番目のタイプ: CSS3絶対位置+変位

絶対配置と CSS3 の transform: translate を使用することで、同じ効果を実現できます。

親要素:

子要素:

水平および垂直の中央揃え:

4番目: Flexbox: [柔軟なレイアウト ボックス モデル]

Flexbox モデルを使用すると、要素を水平方向と垂直方向に配置することが非常に簡単になります。

ここで HTML を変更する必要があります。

親要素:

子要素:

水平および垂直の中央揃え:

いくつかの方法の比較:

最初のタイプの CSS 絶対位置マージン調整は互換性は良好ですが、柔軟性に欠けます。水平方向と垂直方向に中央揃えする必要のあるボックスが多数ある場合は、幅と高さが異なるため、異なる .align-center を記述する必要があります。
2 番目はスクリプト言語を使用しており、互換性が高く、最初のものの欠点を補っています。水平および垂直の中央揃え効果は、幅と高さの変更による影響を受けません。
3 番目は CSS3 の新しいプロパティをいくつか使用し、IE10、Chrome、Firefox、Opera と互換性があります。互換性はあまり良くなく、幅と高さの変更によって水平および垂直の中央揃え効果は影響を受けません。
Flexbox モデルを使用すると、Firefox、Opera、Chrome と互換性がありますが、IE は完全に無効になります。水平および垂直の中央揃え効果は、幅と高さの変更による影響を受けません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。