Centrare il contenuto della pagina sotto uno sfondo generato da script

[IIS2016DelCampoGiuseppe]

Salve,
mi servirebbe aiuto per un problema che non riesco a risolvere. In pratica ho "installato" sulla homepage del mio sito questo script che serve per simulare l'effetto matrix come sfondo. Vorrei aiuto per riuscire a capire come centrare la parte effettiva del sito, quindi quella che viene visualizzata sopra l'effetto matrix. Ora ho semplicemente cambiato bottom le caratteristiche di #main (bottom e left) nel css, in modo da centrarlo sul mio monitor 27 pollici. Qualche suggerimento su come adattare tutto il contenuto della pagina ad ogni monitor diverso?
Grazie in anticipo per l'aiuto.

Ecco il link alla homepage:
http://iis2016delcampogiuseppe.altervista.org/

La parte HTML interessata è la seguente:

 <canvas id="c"></canvas>
      <span id ="main">

        ------
        pagina html con tutto il codice relativo
        ------

      </span>
      <script src="FunzioniIndex/matrix.js"></script>

L'ultimo script è quello che genera l'effetto, ed è il seguente:

        // geting canvas by id c
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");

        //making the canvas full screen
        c.height = window.innerHeight;
        c.width = window.innerWidth;

        //chinese characters - taken from the unicode charset
        var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
        //converting the string into an array of single characters
        matrix = matrix.split("");

        var font_size = 10;
        var columns = c.width / font_size; //number of columns for the rain
        //an array of drops - one per column
        var drops = [];
        //x below is the x coordinate
        //1 = y co-ordinate of the drop(same for every drop initially)
        for(var x = 0; x < columns; x++)
            drops[x] = 1; 

        //drawing the characters
        function draw()
        {
            //Black BG for the canvas
            //translucent BG to show trail
            ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.fillStyle = "#0F0"; //green text
            ctx.font = font_size + "px arial";
            //looping over drops
            for( var i = 0; i < drops.length; i++ )
            {
                //a random chinese character to print
                var text = matrix[ Math.floor( Math.random() * matrix.length ) ];
                //x = i*font_size, y = value of drops[i]*font_size
                ctx.fillText(text, i * font_size, drops[i] * font_size);

                //sending the drop back to the top randomly after it has crossed the screen
                //adding a randomness to the reset to make the drops scattered on the Y axis
                if( drops[i] * font_size > c.height && Math.random() > 0.975 )
                    drops[i] = 0;

                //incrementing Y coordinate
                drops[i]++;
            }
        }

        setInterval( draw, 35 );

Il CSS è il seguente:

             *{
                margin: 0;
                padding: 0;
            }
            
            /* Page settings */
            html {
                width: 100%;
                height: 100%;
                background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;
                overflow-x: hidden;
                overflow-y: hidden;
            }
            body {
                text-align:center;
                display:table;
                background: black;
                width: 100%;
                height: 100%;
                overflow-x: hidden;
                overflow-y: hidden;
                align-items: center;
            }
            canvas {
            display:block;
            }
            #main {
                position: absolute;
                bottom: 150px;
                left: 660px;            // bottom e left sono le parti che ho modificato per spostare momentaneamente la homepage e farla 
                                                         sembrare centrata
                z-index : 1;
                vertical-align: middle;
            }

[IIS2016DelCampoGiuseppe]

Cerco di aggiungere qualche dettaglio visto che per ora nessuno ha ancora postato nulla..
in pratica il background è come se fosse una cosa a parte dallo "sfondo" generale della pagina, diciamo come un elemento di essa. Infatti per posizionare sopra il contenuto effettivo della homepage, ho dovuto semplicemente racchiudere tutto in uno span identificato dall'id "main" in modo da farlo apparire sopra l'effetto background. Per fare questo ho impostato bottom e left su questo span in modo da centrarlo apparentemente sulla mia risoluzione, quindi ho spostato in pixel il contenuto della pagina.
Per spiegarmi meglio, quindi l'effetto del background non è un vero e proprio background come sarebbe un body background=" .. " ma lo considera più un elemento della pagina.. come posso posizionare centrata la mia homepage sopra questo background?
Prima utilizzavo un semplicissimo align center.. qualche suggerimento ragazzi?

[sylette]

Cerco di aggiungere qualche dettaglio visto che per ora nessuno ha ancora postato nulla..
in pratica il background è come se fosse una cosa a parte dallo "sfondo" generale della pagina, diciamo come un elemento di essa. Infatti per posizionare sopra il contenuto effettivo della homepage, ho dovuto semplicemente racchiudere tutto in uno span identificato dall'id "main" in modo da farlo apparire sopra l'effetto background. Per fare questo ho impostato bottom e left su questo span in modo da centrarlo apparentemente sulla mia risoluzione, quindi ho spostato in pixel il contenuto della pagina.
Per spiegarmi meglio, quindi l'effetto del background non è un vero e proprio background come sarebbe un body background=" .. " ma lo considera più un elemento della pagina.. come posso posizionare centrata la mia homepage sopra questo background?
Prima utilizzavo un semplicissimo align center.. qualche suggerimento ragazzi?

hai provato ad utilizzare bootstrap ? https://getbootstrap.com/docs/4.1/ge.../introduction/

[IIS2016DelCampoGiuseppe]

hai provato ad utilizzare bootstrap ? https://getbootstrap.com/docs/4.1/ge.../introduction/

Ciao, grazie per il consiglio. Cos'è e a cosa serve?

[IIS2016DelCampoGiuseppe]

Ragazzi ho ripristinato il vecchio stile della mia homepage. Se qualcuno avrà prima o poi l'occasione di aiutarmi ecco la fonte del codice:
https://code.sololearn.com/Wj7ZWBg5m2OG/?ref=app#html

Ripeto in poche parole: vorrei semplicemente che lo script fosse un background normale della homepage, come uno sfondo diciamo. E poi vorrei mettere il resto della mia homepage sopra questo sfondo, niente di più. Solo che non sono molto esperto di programmazione web quindi non saprei come fare, ho provato molte cose ma niente. Grazie in ogni caso per l'aiuto ..