CSS中讓框居中顯示的方法有多種，其中常見的是使用flex布局、grid布局或position屬性。

我們可以使用flex布局來實(shí)現(xiàn)框的居中顯示，flex布局是一種非常靈活的布局方式，可以輕松地讓元素在容器中居中，我們只需要將容器設(shè)置為flex布局，并將框設(shè)置為容器的子元素即可。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

在上面的代碼中，我們將容器設(shè)置為flex布局，并使用了justify-content和align-items屬性來讓框在容器中居中顯示。

我們還可以使用grid布局來實(shí)現(xiàn)框的居中顯示，grid布局是一種基于網(wǎng)格的布局方式，可以讓元素在網(wǎng)格中自由放置，我們只需要將容器設(shè)置為grid布局，并將框放置在容器的中心位置即可。

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

在上面的代碼中，我們將容器設(shè)置為grid布局，并使用了justify-content和align-items屬性來讓框在容器中居中顯示。

我們還可以使用position屬性來實(shí)現(xiàn)框的居中顯示，我們可以將框設(shè)置為***定位，并使用top、left、right和bottom屬性來讓框在容器中居中顯示。

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: red;
}

在上面的代碼中，我們將容器設(shè)置為相對定位，并將框設(shè)置為***定位，我們使用top和left屬性將框的左上角移動(dòng)到容器的中心位置，并使用transform屬性將框向右下方移動(dòng)，以實(shí)現(xiàn)框的居中顯示。