Center stage in Vue-Konva

Question

I am trying to build a very basic app for editing videos, using Vue-Konva in Vue 2. Here's a Vue component named 'konvaStage'. It's a simple stage with a 1px black frame :

<template>
  <div>
    <v-stage :config='stageConfig'>
      <v-layer>
        <v-rect :config='rectConfig'></v-rect>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
  export default {
    name: 'konvaStage',
    data() {
      return {
        stageConfig: {
          width: 300,
          height: 300,
        },
        rectConfig: {
          x: 0,
          y: 0,
          width: 300,
          height: 300,
          stroke: 'black',
          strokeWidth: 1
        }
      };
    }
  }
</script>

Despite playing with CSS to align the stage in the component file, and also in the parent app view, the stage is always centered left, with some margin from the window border. I used both text-align and align-content properties.

I managed to find a way by wrapping the stage in a <p align='center'> </p> tag. However, adding a border shows that the canvas expands through the entire width of the page. In particular, managing click events and their coordinates are impossible in this configuration.

Any better way to do this?

Answer 1

I found a more valid solution : wrapping the stage in a td tag, within a centered table :)