How you can make Unity WebGL participant centered and match to the browser window?

January 19, 2026

12

I am making an attempt to make a customized WebGLTemplate that’ll load equally to the Minimal template, however centered+maximized (NOT fullscreen) just like the PWA template.

I discovered tips on how to make it resized to correct proportions (minus when the window is shrunk down height-wise), however I am unable to work out tips on how to make it centered. I attempted to do what PWA’s html file did with its types.css and make the unity-canvas styled place: fastened;, which seems to be prefer it may work, but it surely simply finally ends up shifting the entire sport space a half-screen to the proper for some cause.

Can somebody assist me work out what I am doing fallacious?

Here is my index.html:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content material-Sort" content material="textual content/html; charset=utf-8">
    <title>Unity Internet Participant | {{{ PRODUCT_NAME }}}</title>
#if SHOW_DIAGNOSTICS
    <hyperlink rel="stylesheet" href="<<<TemplateData/diagnostics.css>>>">
    <script src="<<<TemplateData/diagnostics.js>>>"></script>
#endif
  </head>
  <physique type="text-align: heart; padding: 0; border: 0; margin: 0;">
    <canvas id="unity-canvas" width={{{ WIDTH }}} top={{{ HEIGHT }}} tabindex="-1" type="width: 100%; top: 100%; background: {{{ BACKGROUND_FILENAME ? 'url('Construct/' + BACKGROUND_FILENAME.substitute(/'/g, '%27') + '') heart / cowl' : BACKGROUND_COLOR }}}"></canvas>
#if SHOW_DIAGNOSTICS
    <div id="unity-footer">
        <img id="diagnostics-icon" src="TemplateData/webmemd-icon.png">
    </div>
#endif
    <script src="Construct/{{{ LOADER_FILENAME }}}"></script>
    <script>
      if (/iPhone|iPad|iPod|Android/i.check(navigator.userAgent)) {
        // Cellular gadget type: fill the entire browser shopper space with the sport canvas:
        var meta = doc.createElement('meta');
        meta.identify="viewport";
        meta.content material="width=device-width, top=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=sure";
        doc.getElementsByTagName('head')[0].appendChild(meta);

        var canvas = doc.querySelector("#unity-canvas");
        canvas.type.width = "100%";
        canvas.type.top = "100%";
        canvas.type.place = "fastened";

        doc.physique.type.textAlign = "left";

#if SHOW_DIAGNOSTICS
        // place the diagnostics icon within the nook on the canvas
        let diagnostics_icon = doc.getElementById("diagnostics-icon");
        diagnostics_icon.type.place = "fastened";
        diagnostics_icon.type.backside = "10px";
        diagnostics_icon.type.proper = "0px";
        canvas.after(diagnostics_icon);
#endif
      }

      createUnityInstance(doc.querySelector("#unity-canvas"), {
        arguments: [],
        dataUrl: "Construct/{{{ DATA_FILENAME }}}",
        frameworkUrl: "Construct/{{{ FRAMEWORK_FILENAME }}}",
#if USE_THREADS
        workerUrl: "Construct/{{{ WORKER_FILENAME }}}",
#endif
#if USE_WASM
        codeUrl: "Construct/{{{ CODE_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: "Construct/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
        productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
        productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
        // matchWebGLToCanvasSize: false, // Uncomment this to individually management WebGL canvas render dimension and DOM ingredient dimension.
        // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on excessive DPI shows.
      }).then((unityInstance) => {
#if SHOW_DIAGNOSTICS
        doc.getElementById("diagnostics-icon").onclick = () => {
            unityDiagnostics.openDiagnosticsDiv(unityInstance.GetMetricsInfo);
        };
#endif
      }).catch((message) => {
        alert(message);
      });
    </script>
  </physique>
</html>

As well as, I have been making an attempt to get both the sport or the webpage to verify the sport is resized to slot in both/each top or width within the browser window. Kinda like in Unity3D’s canvas with the Scale with Display Measurement possibility, Display Match Mode - Broaden. However in fact I am not utilizing the Canvas for this.

All it is supposed to indicate it doesn’t matter what:

The way it at present is, the place it cuts off the display if it is squished:

Is there a means to do that throughout the net template? Or is that this an in-game concern I want to determine?