Adjust canvasgaugecard position

Hi all, i’am trying to figure out following problem. I cannot put in the center gauge.
Here is image:
immagine

and this is the code:

type: picture-elements
image: /local/gauge/
elements:
  - type: custom:canvas-gauge-card
    entity: sensor.shelly_em_channel_1_power
    style:
      top: 50%
      left: 50%
      width: null
      heigth: null
      box-shadow: none
      background-color: transparent
      transform: scale(1,1) translate(-50%,-50%)
    gauge:
      type: radial-gauge
      title: Solar
      width: 250
      height: 250
      minValue: 0
      maxValue: 500
      startAngle: 40
      ticksAngle: 280
      valueBox: true
      majorTicks:
        - '0'
        - '50'
        - '100'
        - '150'
        - '200'
        - '250'
        - '300'
        - '350'
        - '400'
        - '450'
        - '500'
      minorTicks: 5
      strokeTicks: true
      highlights:
        - from: 0
          to: 50
          color: rgba(104, 225, 67, .75)
        - from: 50
          to: 100
          color: rgba(255, 255, 85, .75)
        - from: 100
          to: 150
          color: rgba(239, 133, 51, .75)
        - from: 150
          to: 200
          color: rgba(234, 51, 36, .75)
        - from: 200
          to: 300
          color: rgba(140, 26, 75, .75)
        - from: 300
          to: 500
          color: rgba(115, 20, 37, .75)
      borders: 'no'
      needleType: arrow
      needleWidth: 3
      needleCircleSize: 7
      needleCircleOuter: true
      needleCircleInner: false
      animationDuration: 1500
      animationRule: linear
      valueBoxBorderRadius: 10
      colorValueBoxRect: '#222'
      colorValueBoxRectEnd: '#333'
      valueDec: 0
      valueInt: null

Can you point me right way?
Regards