JavaScript を使用せずに CSS で Div 要素の中心展開を実現するにはどうすればよいですか?

CSS を使用して中心から Div を拡張する

CSS 変換の領域では、div 要素が中心軸から優雅に拡張することを想像するかもしれません。上隅と左隅から展開するデフォルトの動作ではなく、ただし、この望ましい効果は JavaScript なしでは課題になります。

解決策: マージンの操作

この中央揃えの展開を実現する鍵は、特定のメソッドを使用して div のマージンを移行することにあります。式。この手法では、ターゲット サイズと初期サイズの差を計算し、結果を 2 で割ります。この値は、移行中に負のマージン調整として適用されます。

カスタマイズ オプション:

必要な動作に応じて、次の 3 つの主要なオプションが利用可能です。

オプション 1: スペースの保持

このオプションは、周囲に確保されたスペース内で div を拡張し、周囲の要素には影響を与えません。

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

オプション2: 周囲の要素をオーバーライドします

負のマージンを設定すると、このオプションにより div が近くの要素上に拡張され、その内容が重なり合います。

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

オプション 3: シフト周囲の要素

このバリエーションは div をシフトし、後続の要素をドキュメント フローの下に移動します。

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

注: これらの計算は正方形の div に適用されます。非正方形要素の場合、マージン調整の計算は、希望する比例的なサイズ変更に応じて若干異なる場合があります。

以上がJavaScript を使用せずに CSS で Div 要素の中心展開を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。