怎么把计数器放在首图的中间

要将计数器放在首图的中心位置，您可以使用CSS中的绝对定位方法。首先，将计数器元素放置在首图中心位置。然后，使用CSS样式将计数器元素的位置设置为绝对定位，并将其移动到首图的中心位置。以下是示例代码：

HTML代码：

<div class="image-container">
  <img src="first-image.jpg" alt="First Image">
  <div class="counter">10</div>
</div>

CSS代码：

.image-container {
  position: relative;
  text-align: center;
}

.counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  color: #000;
  font-size: 24px;
  padding: 10px;
}

在这个示例中，我们使用了一个包含图片和计数器元素的`<div>`元素作为容器。通过设置`position: relative`样式，我们可以确保计数器元素的位置相对于容器而言。然后，我们使用`text-align: center`样式来让图片水平居中。

接下来，我们设置计数器元素的样式。我们将其位置设置为绝对定位，使其相对于容器的左上角定位。然后，我们使用`top: 50%`和`left: 50%`样式将其移动到容器的中心位置。最后，我们使用`transform: translate(-50%, -50%)`样式微调其位置，使其完全居中。

您可以根据需要调整计数器元素的样式，以使其适应您的网站设计。