CSSで負のマージン値を使用して中心位置を調整する方法

この記事では、CSS で中心位置を調整するために負のマージン値を使用する方法を主に紹介します。この一般的な方法のいくつかの注目すべき点についても説明します。これはおそらく最も一般的に使用される方法です。センタリング方法。各要素のサイズがわかっている場合は、幅と高さの半分に等しい負のマージン値を設定し (box-sizing: border-box スタイルを使用しない場合は、パディング値も追加する必要があります)、一致させます。上: 50%; 左: 50% ; スタイルはブロック要素を中央に配置します。

期待どおり、これが IE6-7 で動作できる唯一の方法であることに注意してください。

.is-Negative {       
        width: 300px;       
        height: 200px;       
        padding: 20px;       
        position: absolute;       
        top: 50%; left: 50%;       
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

利点:

ブラウザーの互換性が非常に高く、IE6-7 もサポート

コーディングはほとんど必要ありません

また、注意してください:

これは非応答的なメソッドであり、パーセンテージサイズを使用することもできません。 min-/max-の最大値と最小値を設定します。

コンテンツがコンテナを超える可能性があります

パディング用のスペースを予約するか、box-sizing: border-box スタイルを使用する必要があります。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

position:fixed 属性を使用して DIV を中央に配置する方法

CSS ポップアップ ウィンドウを中央に配置する方法

CSS 浮動小数点と位置の分析

以上がCSSで負のマージン値を使用して中心位置を調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。