CSS を使用して、サイズの大きい画像を Div 内の中央に配置するにはどうすればよいですか?

CSS を使用して Div 内の特大画像を中央に配置する

画像コンテナの幅が異なる流動的なレイアウトを扱う場合、div 内で特大画像を中央に配置すると、次のようになります。挑戦です。 margin-left と margin-right を auto に設定するような従来の CSS 方法は、周囲の div よりも小さい画像に対してのみ機能します。

この問題に対処するには、次の CSS ソリューションを検討してください:

.parent {
    position: relative;
    overflow: hidden;
    // Optional height and width settings based on the desired design
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

このアプローチにより、サイズに関係なく、すべての画像が親 div 内で水平方向と垂直方向の両方で中央に配置されます。負の上下左右の値は基本的に、画像が親内のスペース全体を埋めるように強制し、マージン: 自動ルールによってそのスペース内の中央に画像が配置されます。

画像を超えてオーバーフローする要素を非表示にすることにより、 overflow: hidden を使用して親 div を編集すると、特大の画像の両端が均等に切り取られ、目的のセンタリング効果が作成されます。

以上がCSS を使用して、サイズの大きい画像を Div 内の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。