CSS居中顯示代碼怎么寫

在CSS中，要使文本或元素在容器中居中顯示，可以使用多種方法，以下是一些常見的方法：

1、使用flex布局

Flex布局是一種強大的布局工具，可以輕松實現(xiàn)文本或元素的居中顯示，只需將容器設置為flex布局，并將justify-content和align-items屬性設置為center即可。

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

2、使用grid布局

Grid布局是另一種強大的布局工具，也可以實現(xiàn)文本或元素的居中顯示，只需將容器設置為grid布局，并將justify-content和align-items屬性設置為center即可。

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

3、使用position屬性

通過將容器設置為相對定位（relative），并將文本或元素設置為***定位（absolute），可以實現(xiàn)文本或元素的居中顯示，使用left和top屬性來調整位置。

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

4、使用text-align屬性

對于文本，可以使用text-align屬性來將其居中顯示，將容器的text-align屬性設置為center即可。

.container {
  text-align: center;
}