Экран пользовательской загрузки покрывает только половину сцены

Question

У меня проблема с использованием пользовательского экрана загрузки. Когда я отображаю экран загрузки, он покрывает только половину сцены: изображение при загрузке 1

Этот код я использую для отображения экрана загрузки:

BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() {
    if (document.getElementById("customLoadingScreenDiv")) {
      document.getElementById("customLoadingScreenDiv").style.display =
        "initial";
      return;
    }

    this._loadingDiv = document.createElement("div");
    this._loadingDiv.id = "customLoadingScreenDiv";
    this._loadingDiv.style.color = "white";
    this._loadingDiv.style.height = "1000px";
    this._loadingDiv.style.width = "100%";
    this._loadingDiv.style.alignContent = "center";
    this._loadingDiv.style.marginTop = "-50%";
    var img = new Image();
    img.src = "[link to gif]";
    img.style.position = "center";
    this._loadingDiv.appendChild(img);

    this._resizeLoadingUI();
    window.addEventListener("resize", this._resizeLoadingUI);
    document.body.appendChild(this._loadingDiv);
  };

  BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
    document.getElementById("customLoadingScreenDiv").style.display =
      "none";
  };

В чем моя ошибка?

Answer 1

Это margin-top: -50%, вероятно, вызывает это. Вы пытаетесь вертикально и горизонтально центрировать этот div? alignContent также ничего не делает, не объявляя его также display: flex.

Answer 2

Я бы сказал, что это скорее проблема CSS, чем любой из тегов, которые вы пометили вопросом.

Мое решение будет:

this._loadingDiv.style.color = "white";
this._loadingDiv.style.height = "100vh";
this._loadingDiv.style.width = "100%";