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

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

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

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

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

<code class="css">img {
  display: block;
  margin: 0 auto;
}</code>

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

使用 flexbox 布局

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 100px;
  height: 100px;
}</code>

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

使用网格布局

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  width: 100px;
  height: 100px;
}</code>

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

使用绝对定位

<code class="css">img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

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

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