Центр Google Maps VUE компонент

Question

У меня есть компонент Google Maps 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>

Карта не центрирована (см. Скриншот). Как мне это отцентрировать?

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;