CSSで画像を上下中央に表示させる方法

CSS を使用して画像を上下中央に配置する方法には、フレックスボックスを使用する、親コンテナのフレックス方向を列に設定する、コンテンツを揃える、項目を中央に揃えるなどがあります。絶対配置を使用し、画像の位置を絶対、上と左を 50% に設定し、オフセットに変換属性を使用します。グリッド レイアウトを使用するには、親コンテナの表示をグリッドに設定し、アイテムを中央に配置します。 object-fit 属性を使用して画像を中央に配置します

#CSS を使用して画像を上下に中央に配置する方法

CSS では、次のメソッドを使用して画像を上下の中央に配置できます:

メソッド 1: flexbox を使用します

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}

メソッド 2: 絶対値を使用します位置決め

.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法 3: グリッド レイアウトを使用する

.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}

方法 4: オブジェクトフィット属性を使用する

img {
  object-fit: contain;
}

方法 5 : パディングを使用する

.container {
  padding: 20px 0;
}

img {
  height: 100px;
}

方法を選択するための提案:

画像の周囲に他の要素が必要な場合は、次を使用します。フレックスボックスまたはグリッド レイアウト。
• 画像サイズが固定されている場合は、絶対配置またはオブジェクトフィット属性を使用します。
• 画像サイズが固定されていない場合は、フレックスボックスまたはグリッド レイアウトを使用することをお勧めします。

以上がCSSで画像を上下中央に表示させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。