我一直在努力工作的网站，完成了一个标题和一个图像的身体。然而，我面临着一个挑战，而试图在身体部分的中心图像。图像顽固地保持固定在左边，拒绝移动。
你可以在GitHub上找到我的项目代码。
首先，我做了以下调整：
1.我将height: 100vh;添加到.grid类中，旨在使其占据整个视口高度。
1.将text-align: center;应用于.grid div，以集中每个网格项中的内容。
1.在#plattegrond中添加了max-width: 100%;和max-height: 100%;，以防止图像超出容器尺寸。
尽管我期望将图片水平居中放置在页面中间，但结果却出乎意料。图片变小了，不是我的本意，但它确实水平居中。然而，它顽固地保持在网站的左侧，未能垂直居中。
为了找到解决方案，我做了一些额外的修改：
1.我考虑过将.grid类的display属性更改为flex，以便更容易地将子元素居中。
1.设置justify-content: center;和align-items: center;以实现水平和垂直居中。
1.已调整#plattegrond的宽度和高度属性以填充容器，同时保持原始纵横比。
不幸的是，结果并不像预期的那样。图像居中，但它变得过大，导致链接到同一样式的其他页面出现问题。这在整个网站上保持一致的大小方面提出了意想不到的挑战。
为了完成这项任务，我向ChatGPT寻求指导。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  background-color: #4883BD;
  height: 100vh; /* Set the height to fill the viewport height */
}

.grid div {
  text-align: center; /* Center the content within each grid item */
}

#plattegrond {
  max-width: 100%; /* Ensure the image does not exceed the container width */
  max-height: 100%; /* Ensure the image does not exceed the container height */
}

个字符