使用Grid布局实现页面图片居中的问题及调试求助

我正在开发一个包含头部与主体图片的网站，遇到了主体区域图片无法居中的难题：图片始终固定在左侧，无法移动。

初始调试操作 #

• 为.grid类添加height: 100vh;，使其占满视口高度
• 为.grid div设置text-align: center;，实现网格项内内容居中
• 为#plattegrond添加max-width: 100%;和max-height: 100%;，防止图片超出容器尺寸

调试结果 #

图片意外缩小，仅实现水平居中，但仍处于页面左侧，无法垂直居中。

后续调整尝试 #

• 将.grid类的display属性改为flex，便于子元素居中
• 设置justify-content: center;和align-items: center;，实现水平垂直双居中
• 调整#plattegrond的宽高属性，使其填充容器并保持原比例

新问题 #

图片居中后尺寸过大，导致共用同一样式表的其他页面出现布局问题，难以维持全站尺寸一致性。

参考调试代码 #

方案一（Grid布局） #

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  background-color: #4883BD;
  height: 100vh; /* 让容器占满视口高度 */
}

.grid div {
  text-align: center; /* 让网格项内的内容水平居中 */
}

#plattegrond {
  max-width: 100%; /* 确保图片不超出容器宽度 */
  max-height: 100%; /* 确保图片不超出容器高度 */
}

方案二（Flex布局） #

.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #4883BD;
}

#plattegrond {
  width: 100%; /* 让图片宽度填充容器 */
  height: auto; /* 调整宽度时保持图片比例 */
  max-width: none; /* 允许图片使用原始宽度 */
  max-height: none; /* 允许图片使用原始高度 */
}

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