# How do I center a "rect"?

**URL:** <https://discuss.elastic.co/t/how-do-i-center-a-rect/366655>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [September 17, 2024, 7:24am UTC](https://discuss.elastic.co/t/how-do-i-center-a-rect/366655 "2024-09-17T07:24:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjessing](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cjessing/32/133870_2.png) [@cjessing](https://discuss.elastic.co/u/cjessing)\
**Post date:** [September 17, 2024, 7:24am UTC](https://discuss.elastic.co/t/how-do-i-center-a-rect/366655/1 "2024-09-17T07:24:55Z")

</div>

I have this snippet rendering a circle:

```auto
        {
          "mark": {
            "type": "circle",
            "size": 200,
            "fillOpacity": 0.7,
            "stroke": "white",
            "strokeWidth": 1,
            "cornerRadius": 5
          },
          "encoding": {
            "color": {
              "field": "color",
              "type": "nominal",
              "scale": null,
              "legend": null
            }
          }
        },

```

The circle is rendered in the center of the viewport and correctly moves when resizing the browser.

I would like to render a centered `rect` rather than the circle but replacing the `mark` with this renders the reactangle in the top right corner:

```
      "mark": {
        "type": "rect",
        "width": 200,
        "height": 100,
        "fillOpacity": 0.7,
        "stroke": "white",
        "strokeWidth": 1,
        "cornerRadius": 5
      },

```

What am I missing? Why does the two shapes behave so differently?

edit: I see that a `square` centers automatically... still puzzled.🤔

Thanks in advance 🙂