Align vertically via CSS

Hi all!
I used this excellent integration to simulate the control panel of a coffee machine:

Please, can anyone tell me how I can do to vertically Align the panel via CSS?
I wish it was always vertically centered in its Home Assistant tab …


Assuming you are using ha-floorplan how are you creating that image? If it is ha-floorplan you should have just drawn the image up aligned as you wanted it. Then you just set yout touch points and that is it?

I created this image in Photoshop.
Currently in my CSS:

#floorplan {
    padding: 13%;

#floorplan > svg {
    max-width: 800px;

svg {
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    padding: 1px;

svg * {
    vector-effect: non-scaling-stroke !important;

The trouble is I think that this will vary depending upon the aspect ratio and resolution of the device you are viewing it on. If you want to centre it just one particular device I would work out the size of the panel and make your SVG that size. You can adjust the size in Inkscape by going to FILE>>DOCUMENT PROPERTIES and adjusting the custom size