画像を Div 内で完全に中央に配置するにはどうすればよいですか?

コンテナ Div 内で完璧な画像の中央配置を実現

Web デザインにおける一般的な課題の 1 つは、より大きなコンテナ Div 内で画像を中央に配置することです。正確な垂直方向と水平方向の位置合わせソリューションを使用して、このクエリに対処しましょう。

質問:

200 x 200 ピクセルの div 内で 50 x 50 ピクセルの画像を中央に配置するにはどうすればよいですか? 、水平方向と垂直方向の両方の配置を確保しますか?

回答:

この位置合わせを実現するには、次の手法を使用します:

絶対位置決めを使用した垂直方向と水平方向のセンタリング

絶対位置決め自動マージンと組み合わせると、要素を水平方向と垂直方向の両方で中央に配置できます。要素の位置を親要素の相対的な位置に基づいて決定することで、正確な位置合わせが保証されます。

CSS コード:

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

このコードにより、画像が確実に中央に配置されます。サイズやブラウザの互換性には関係なく、コンテナの div です。

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