使div居中，但使其保持类似网格的布局

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 换行 */
}

.item {
  flex: 0 0 25%; /* 每个子元素占据父容器的四分之一宽度 */
  height: 100px; /* 设置子元素的高度 */
  border: 1px solid #000; /* 添加边框样式，以形成网格效果 */
}

.container {
  display: grid;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  grid-template-columns: repeat(4, 1fr); /* 将父容器分为四列 */
  grid-gap: 10px; /* 设置子元素之间的间距 */
}

.item {
  height: 100px; /* 设置子元素的高度 */
  border: 1px solid #000; /* 添加边框样式，以形成网格效果 */
}