Odoo13 - Custom webpage with content centered vertically

Question

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.

Answer 1

I've found the solution.

I didn't realize that earlier but this line:

<t t-set="pageName" t-value="'Custom page'" />

Actually adds a class in the div #wrapwrap with a pageName value. This allows me to target my specific webpage in CSS and modify the flexbox functionality according to my needs (which I wasn't able to do previously without breaking every single page if I simply changed #wrapwrap's CSS).

So I changed a pageName value to be a proper class name:

<t t-set="pageName" t-value="'custom_page'" />

And then used it with SCSS to modify flexbox and add a background:

.custom_page{
    background-image: url('/image.png'); 
    background-attachment: fixed;
    background-position: center top; 
    background-repeat: no-repeat;
    background-size: cover;

    main {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}