用vue写一个电影详情页，电影海报必须在正中间

好的，我可以为您提供一个简单的代码段，来实现用Vue编写电影详情页并在中心显示海报。

HTML模板代码：

<template>
  <div class="movie-details">
    <div class="poster-container">
      <img :src="movie.poster" alt="movie poster" class="poster">
    </div>
    <div class="movie-info">
      <h1>{{movie.title}}</h1>
      <p>{{movie.description}}</p>
      <div class="details">
        <span>{{movie.release_date}}</span>
        <span>{{movie.runtime}} mins</span>
        <span>{{movie.genres.join(', ')}}</span>
      </div>
    </div>
  </div>
</template>

CSS样式代码：

.movie-details {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.poster-container {
  position: relative;
  width: 400px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.poster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.movie-info {
  margin-left: 40px;
}

.details {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.details span {
  margin-right: 10px;
}

在这个示例中，我们使用了Flexbox布局来使整个电影详情页垂直居中。海报的容器使用了相对定位，以便我们可以使用绝对定位来将海报放置在中心位置。

通过使用translate(-50%, -50%)，我们可以使海报在垂直和水平方向上都居中显示，并使用object-fit:contain;来确保图像不会失真。

希望这个代码段对您有所帮助！