如何让Div自适应内容或固定尺寸并居中显示

针对你需要让目标容器（.board-container）要么自适应内容、要么固定尺寸且保持居中的需求，这里提供两种可行的修改方案：

一、固定尺寸（500px×380px）并居中 #

核心是给父容器添加居中布局，同时给目标容器设置固定宽高，避免旋转元素溢出：

/* 给父容器.game添加布局，确保子元素垂直排列且水平居中 */
.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 20px;
}

.board-container {
  position: relative;
  /* 设置固定尺寸 */
  width: 500px;
  height: 380px;
  /* 防止旋转后的.begin元素超出容器 */
  overflow: hidden;
}

.begin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #FDF8E6;
  transform: rotateY(180deg) rotateZ(50deg);
  /* 以容器中心为旋转原点，避免偏移 */
  transform-origin: center center;
}

.board {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 20px;
  /* 让网格内容在容器内居中 */
  justify-content: center;
  align-content: center;
  height: 100%;
}

二、自适应内部内容并居中 #

如果不需要固定尺寸，让容器根据内部网格内容自动调整大小，只需调整.board-container的显示属性：

.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 20px;
}

.board-container {
  position: relative;
  /* 让容器自适应内部内容宽度 */
  display: inline-block;
}

.begin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #FDF8E6;
  transform: rotateY(180deg) rotateZ(50deg);
  transform-origin: center center;
}

.board {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 20px;
}

问题原因说明 #

之前设置固定尺寸后容器偏离中心，是因为父容器.game没有设置任何居中布局规则，.board-container作为块级元素默认左对齐。通过给.game添加flex布局并设置align-items: center，就能让所有子元素水平居中，同时保持垂直方向的正常排版。

内容的提问来源于stack exchange，提问作者Patrycja Zborowska