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 サイトをご覧ください。

関連する推奨事項:

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