中心Google Maps Vue组件

Question

我有一个类似vue / nuxt的Google Maps组件：

<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>

地图未居中（请参见屏幕截图）。我如何居中？

Answer 1

margin: 0 auto居中技术仅适用于块级元素。

因此，给您的组件display: block;

div, span {
  margin: 0 auto; 
  width: 200px; 
  border: 1px solid red;
}

<div>working</div>
<span>not working</span>
<span style="display:block">working</span>

或者，您可以使用以下命令将其包装在一个元素中：

• text-align: center;
• 或display: flex; justify-content: center;