How to set Rectangle in the center of window

[ghost]

My components are below:

import { GridBox , VerticalBox} from "std-widgets.slint";
export component Coin {
    in property <color> coin-bg-color: #ffd70e;
    in-out property <color> coin-border-color: #CFB63C;
    in property <color> coin-side-color: #b39800;

    coin-side := Rectangle {
        x: 70px;
        y: -10px;
        width: coin.width + 2.5px;
        height: self.width + 2.5px;
        border-width: 3px;
        border-radius: self.height/2;
        background: coin-side-color;

        // drop-shadow-offset-x: 20px;
        // drop-shadow-offset-y: 10px;
        // drop-shadow-blur: 0;
        // drop-shadow-color: #b39800;
    }

    coin := Rectangle {
        x: 200px;
        y: 200px;

        // sizes
        width: 300px;
        height: self.width;

        // border
        border-width: 3px;
        border-radius: self.height/2;
        // TODO: idk
        horizontal-stretch: 1;
        vertical-stretch: 1;
        
        // Colors
        background: coin-bg-color;
        border-color: coin-border-color;

        // TODO: fix touch area around the cycle
        coin-touch := TouchArea {
            enabled: true;
            horizontal-stretch: 1;
            vertical-stretch: 1;
            clicked => {
                debug("clicked")
            }
        }

        Image {
            source: @image-url("../assets/logo.png");
            colorize: #b39800;
            width: parent.width / 2;
            image-rendering: ImageRendering.smooth;

        }
        // coin-focus := FocusScope {}
        // Shadow TODO can replaced with another Reacangle
        // drop-shadow-offset-x: 20px;
        // drop-shadow-offset-y: 10px;
        // drop-shadow-blur: 0;
        // drop-shadow-color: #b39800;
    }
}

and the main component

export component Main inherits Window {
    // window size
    max-width: 400px;
    min-width: 400px;
    max-height: 600px;
    min-height: 600px;
    // window title bar
    title: "Coin";
    icon: @image-url("");
    // background
    background: @linear-gradient(180deg, #000000 0%, #00251c 50%, #040044 100%);

    always-on-top: true;

    
    VerticalLayout {
        alignment: LayoutAlignment.center;

        Coin {
        
        }
    }

}

The problem is i don't know x and y based on which component will be set ...

[ogoffart]

By default, if not in a layout, the elements should be centered.
This is equivalent to do

x: (parent.width - self.width)/2;
y: (parent.height - self.height)/2;

But that element must have a width and height specified (or a preferred-{width,height})