I'm trying to create new page with a element in the middle of the page (centered horizontally and vertically). But Odoo layout causes me a huge trouble and won't allow me to center it properly. I also need to add a page background but because my element isn't full height it does not work as well.

I have something like this:

<template id="custom_page" name="Custom page">
        <t t-call="website.layout">
            <t t-set="pageName" t-value="'Custom page'" />
            <div class="my_page">
                <div class="oe_structure">
                
                    <div id="custom_page" class="container">  <!-- Not able to center verticaly -->                              
                        <div class="card-group mx-auto col-9">
                            <div class="card">
                                ...
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </t> 
</template>

I'm able to center my element horizontally with mx-auto but I have no idea how to do this vertically. Odoo adds a .wrapwrap which has display: flex and inside it there is a main with flex: 1 0 auto, which makes the main to stretch and push footer to the bottom of the page.

But now when I'm trying to do anything concerning height of elements inside it simply does not work. Either height: 100%, my-auto etc...

I tried to add a div with my custom css in various places but at best it does nothing or brakes whole page.