CSS如何讓圖片居于盒子中央

在CSS中，我們可以使用多種方法將圖片置于盒子中央，以下是一些常用的方法：

1、使用flex布局

Flex布局是一種強大的CSS布局工具，可以輕松地使圖片居于盒子中央，我們可以將盒子的display屬性設(shè)置為flex，并使用justify-content和align-items屬性來分別控制水平和垂直方向上的對齊。

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

2、使用grid布局

Grid布局是另一種強大的CSS布局工具，它也可以使圖片居于盒子中央，我們可以將盒子的display屬性設(shè)置為grid，并使用justify-content和align-content屬性來分別控制水平和垂直方向上的對齊。

.box {
  display: grid;
  justify-content: center;
  align-content: center;
}

3、使用position屬性

我們還可以使用position屬性來將圖片置于盒子中央，我們可以將盒子的position屬性設(shè)置為relative或absolute，并將圖片的位置設(shè)置為top: 50%和left: 50%，然后使用transform屬性來將圖片向上和向左移動。

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

是一些常用的方法，可以根據(jù)實際情況選擇適合的方法來實現(xiàn)圖片居于盒子中央的效果。