CSS中讓兩張圖片相對(duì)居中的方法

在CSS中，我們可以使用多種方法讓兩張圖片相對(duì)居中，下面是一些常見的方法：

1、使用Flexbox布局

Flexbox布局是一種非常靈活的布局方式，可以輕松地實(shí)現(xiàn)圖片居中，我們可以將兩個(gè)圖片元素放入一個(gè)Flex容器，并使用justify-content屬性來(lái)居中圖片。

<div style="display: flex; justify-content: center;">
  <img src="image1.png" alt="圖片1" />
  <img src="image2.png" alt="圖片2" />
</div>

2、使用CSS Grid布局

CSS Grid布局也是一種非常強(qiáng)大的布局方式，可以實(shí)現(xiàn)圖片的***定位，我們可以將兩個(gè)圖片元素放入一個(gè)Grid容器，并使用place-items屬性來(lái)居中圖片。

<div style="display: grid; place-items: center;">
  <img src="image1.png" alt="圖片1" />
  <img src="image2.png" alt="圖片2" />
</div>

3、使用相對(duì)定位和***定位

我們可以將一個(gè)圖片元素設(shè)置為***定位，并將其位置設(shè)置為相對(duì)于另一個(gè)圖片元素的中心位置。

<div style="position: relative;">
  <img src="image1.png" alt="圖片1" style="position: absolute; top: 50%; left: 50%;" />
  <img src="image2.png" alt="圖片2" />
</div>

在這個(gè)例子中，我們將圖片1設(shè)置為***定位，并將其位置設(shè)置為相對(duì)于圖片2的中心位置。

是幾種常見的讓兩張圖片相對(duì)居中的方法，你可以根據(jù)自己的需求和布局方式選擇適合的方法。