CSS圖片文字居中代碼怎么寫

在CSS中，我們可以使用多種方法將圖片和文字居中，下面是一些常見的技巧：

1、使用flexbox布局

Flexbox是一種現(xiàn)代的CSS布局模式，可以輕松地實現(xiàn)元素的對齊，我們可以將圖片和文字包裝在一個flex容器中，并利用justify-content和align-items屬性來實現(xiàn)居中。

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

2、使用grid布局

Grid布局也是實現(xiàn)元素居中的好方法，我們可以將圖片和文字放置在一個grid容器中，并利用justify-content和align-items屬性來實現(xiàn)居中。

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

3、使用position屬性

我們可以將圖片和文字的位置設置為***位置，并利用top、right、bottom和left屬性來實現(xiàn)居中。

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

4、使用text-align屬性

我們可以將文字的對齊方式設置為居中，并利用vertical-align屬性來實現(xiàn)圖片和文字的垂直居中。

.container {
  text-align: center;
}
.image {
  vertical-align: middle;
}

是幾種常見的CSS圖片文字居中方法，你可以根據自己的需求選擇適合的方法。