在網頁中，圖片是重要的展示內容之一。然而，有時我們會遇到圖片不能很好地居中的問題，特別是在Vue中，由于數據驅動視圖的方式，需要特別注意如何讓圖片居中。

首先，我們可以使用CSS的方式來居中圖片。通常我們會給圖片一個包裹容器，并為其設置寬度和高度，如下：

.container{
width: 200px;
height: 200px;
text-align: center;
}
.container img{
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}

其中，我們設置了容器的寬度和高度，并將其文本對齊方式設為居中。在圖片的樣式中，我們將其垂直對齊方式設置為居中，并設置最大寬度和高度為100%。

然而，在Vue中，由于圖片是響應式的，我們需要在mounted時重新計算容器的寬度，以來居中圖片。代碼如下:

<template>
<div class="container" ref="container">
<img :src="imgSrc" class="img"/>
</div>
</template>
<script>
export default{
data(){
return{
imgSrc: 'https://xxx.png'
}
},
mounted(){
this.centerImage()
window.addEventListener('resize', this.centerImage)
},
destroyed(){
window.removeEventListener('resize', this.centerImage)
},
methods:{
centerImage(){
let containerStyle = window.getComputedStyle(this.$refs.container)
let image = this.$refs.container.querySelector('.img')
let containerWidth = parseInt(containerStyle.getPropertyValue('width'))
let imageWidth = image.naturalWidth
let left = (containerWidth - imageWidth) / 2
image.style.left = left + 'px'
}
}
}
</script>

我們首先在mounted中計算容器的寬度，然后使用querySelector獲取圖片，并計算出圖片的實際寬度。根據容器寬度和圖片寬度的差值，我們就可以計算出圖片需要向左移動的距離，并將left值賦值給圖片的樣式屬性即可。

除了CSS和JavaScript的方式，還有很多Vue庫可以幫助我們更方便地實現圖片居中，例如vue-center，vue-image-centers和vue-picture-center等等。使用時只需要安裝依賴，然后在需要居中的圖片上應用指令即可。

總之，圖片居中在Vue中是一個需要注意的問題，我們可以使用CSS和JavaScript的方式，也可以使用庫來幫助我們更方便地實現。無論如何，我們需要在數據驅動視圖的時候，更加細心地處理圖片的樣式，以讓頁面更加美觀。