CSSで画像の中心を設定する方法

CSS では、次の方法で画像を中央に配置できます。 テキスト配置プロパティを使用する: 画像をブロック要素として設定し、自動の左右のマージンを設定します。フレックスボックス レイアウトを使用します。画像をフレックスボックス コンテナーに配置し、水平および垂直の中央揃えプロパティを設定します。グリッド レイアウトを使用する: 画像をグリッド コンテナーに配置し、水平方向と垂直方向の両方の中心プロパティを設定します。絶対配置を使用する: 画像を通常のフローから削除し、変換を使用して水平方向に中央揃えにし、垂直方向に中央揃えにします。

CSS で画像を中央に配置する方法

CSS では、画像を中央に配置するさまざまな方法があります:

テキスト配置属性を使用する

img {
  display: block;
  margin: 0 auto;
}

• display: block</コード > 画像をブロック要素にします。 <code>display: block 使图像成为一个块元素。
• margin: 0 auto 自动设置图像的左右外边距，使其在父元素中水平居中。

使用 flexbox 布局

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

img {
  width: 100px;
  height: 100px;
}

• 创建一个 flexbox 容器（.container）。
• justify-content: center 将子元素（图像）在水平方向上居中。
• align-items: center 将子元素在垂直方向上居中。

使用网格布局

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

img {
  width: 100px;
  height: 100px;
}

• 创建一个网格容器（.container）。
• place-items: center 将子元素（图像）同时在水平和垂直方向上居中。

使用绝对定位

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

• 使用绝对定位将图像从其正常流中移除。
• left: 50% 将图像水平居中，但它将相对于其父元素的左边界居中。
• transform: translate(-50%, -50%)
margin: 0 auto 画像が親要素内で水平方向の中央に配置されるように、画像の左右のマージンを自動的に設定します。

🎜🎜🎜フレックスボックスレイアウトを使用してフレックスボックスコンテナ(.container)を作成します🎜🎜rrreee🎜🎜。 🎜🎜justify-content: center 子要素 (画像) を水平方向に中央揃えにします。 🎜🎜align-items: center 子要素を垂直方向に中央揃えにします。 🎜🎜🎜🎜グリッドレイアウトを使用してグリッドコンテナ(.container)を作成します🎜🎜rrreee🎜🎜。 🎜🎜place-items: center 子要素 (画像) を水平方向と垂直方向の両方で中央揃えにします。 🎜🎜🎜🎜絶対配置を使用する🎜🎜rrreee🎜🎜絶対配置を使用して、画像を通常のフローから削除します。 🎜🎜left: 50% 画像を水平方向に中央に配置しますが、親要素の左端を基準にして中央に配置されます。 🎜🎜transform: translation(-50%, -50%) 画像をその幅と高さの 50% だけ左と上に移動し、親要素内の中央に配置します。 🎜🎜

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