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

より大きな Div 内で画像を中央に配置する (垂直方向と水平方向)

Web デザインの一般的な要件は、より大きな Div 内で画像を中央に配置することです。部水平方向の中央揃えはテキストの配置を使用して実現できますが、垂直方向の配置は、特にブラウザ間の互換性においてより困難になる可能性があります。

解決策:

画像を水平方向の両方に中央揃えにするにはより大きな div 内で垂直方向には、絶対位置決めと自動マージンを組み合わせて使用​​できます。絶対配置を使用すると、親要素を基準にして画像を配置できますが、自動マージンを使用すると、要素が水平方向と垂直方向の両方で中央に配置されます。

このソリューションを実装する CSS コードは次のとおりです:

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

このコードは、画像を大きい方の div 内に絶対的に配置し、その上下左右のマージンを自動に設定します。これにより、画像が div 内で垂直方向と水平方向の中央に配置されます。

注:

このソリューションは、自動をサポートする最新のブラウザ (IE >= 8) で動作します。マージン。古いブラウザの場合、目的の効果を実現するには、フレックスボックスや CSS グリッドなどの代替ソリューションが必要になる場合があります。

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