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

高洛峰
リリース: 2017-02-16 13:39:17
オリジナル
1813 人が閲覧しました

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

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

予想どおり、これが 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 サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート