Div内で画像を垂直方向と水平方向の中央に配置するにはどうすればよいですか?

より大きな Div 内で画像を垂直方向と水平方向にセンタリングする

より大きな Div 内に画像を埋め込む場合、その適切な配置を確保することが重要になる場合があります。特に垂直方向のセンタリングは難しい場合があります。水平方向と垂直方向のセンタリングを効果的に行う方法は次のとおりです。

自動マージンを使用した絶対位置決め

効果的な方法には、自動マージンを使用した絶対位置決めを使用することが含まれます。この手法を使用すると、含まれる div に固定の高さが欠けているシナリオでも、画像を div 内で水平方向と垂直方向の両方に中央に配置できます。

このソリューションを実装するには:

1. image 絶対位置決めは、position:Absolute; を使用します。
2. margin プロパティを自動に設定します。ブラウザがマージンを自動的に調整できるようにします。
3. 上、左、右、および 下の値を指定しますこれは、イメージがその親のスペース全体を占めるように指示します。 div.

コード スニペットの例を次に示します。

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

この手法を使用すると、div の高さに関係なく、画像が div 内で垂直方向と水平方向の中央に配置されます。

以上がDiv内で画像を垂直方向と水平方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。