中心谷歌地图vue组件

我有一个 vue/nuxt 谷歌地图组件，看起来像：

<template>
  <GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <!-- <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  /> -->
</GmapMap>

</template>


<script>


export default {
  // name:'myMap'

}

</script>


<style>
  margin: 0 auto;
  width: 50%;;

</style>

地图未居中（请参见屏幕截图）。我怎样才能把它居中？