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

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

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

CSSコードコンテンツをクリップボードにコピー

.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- の最大値と最小値を設定したりすることはできません。
コンテンツがコンテナを超える可能性があります
パディング用のスペースを予約する必要があるか、ボックス サイズ: ボーダー ボックス スタイルを使用する必要があります。

CSS で負のマージン値を使用して中心位置を調整する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。