vue 图片 置底居中

要在Vue中将图片置底居中，你可以使用CSS样式来控制图片的定位和对齐方式。下面是一种常见的方法，可以让图片在其容器底部居中：

<template>
  <div class="container">
    <img src="路径/到/你的/图片.jpg" alt="图片" class="bottom-centered-image">
  </div>
</template>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh; /* 设置容器的高度，可以根据需要调整 */
}

.bottom-centered-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
</style>

在上面的示例中，我们将图片放置在一个容器（`<div>`元素）中。通过设置容器的CSS样式，我们使用`position: relative;`来创建一个相对定位的容器，并设置`width`和`height`来确定容器的大小。

然后，我们给图片添加了一个类名`bottom-centered-image`，并为这个类设置了绝对定位的属性。通过设置`position: absolute;`，我们可以将图片从文档流中脱离，并相对于容器进行定位。

我们使用了`left: 50%;`和`transform: translateX(-50%);`来水平居中图片。这样，图片的左边缘会在容器的水平中心位置。

最后，我们设置了`bottom: 0;`，将图片置底。

请将示例代码嵌入到你的Vue组件中，并根据需要进行调整。这样，你就可以实现在Vue中将图片置底居中了。

希望这个示例对你有帮助！如果你有任何其他问题，请随时提问。