Question

我正在尝试将加载图像置于屏幕中央，但它似乎更靠近底部居中。我知道如何才能让它更加集中于中心（垂直）？

编辑：在移动显示屏上也应该看起来不错

这里是CSS和HTML：

<style>
    input[type=file]{
        float:left;
    }
    .loader {
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 100px;
        height: 100px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .bd-example-modal-lg .modal-dialog{
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .bd-example-modal-lg .modal-dialog .modal-content{
        background-color: transparent;
        border: none;
    }
</style>

<div id="loading" class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content h-100 row align-items-center vertical-center-row" style="width: 48px">
            <span class="loader"></span>
         </div>
     </div>
</div>

Answer 1

在元素上指定position: absolute;时，它将被定位＆＃34;绝对＆＃34;基于其最接近的DECLARED position: relative;父母。

我建议将position: relative;声明给它＆＃34;＆＃34;包装＆＃34;元素，并根据height: 100vh;或其高度进行游戏。

Answer 2

我还添加了一个背景来显示图像时的背景（我用它在浏览器中制作自定义对话框）。如果你想在图像的背面无法点击任何东西，那么只需删除id为dialog_bg的<div>就可以删除它。将背景的不透明度变为rgba（44,44,44， 0.7）;

#dialog_bg {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  margin-top: 0%;
  /* Set to a negative number 1/2 of your height*/
  margin-left: 0%;
  /* Set to a negative number 1/2 of your width*/
  background: rgba(44, 44, 44, .7);
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#dialog_box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30em;
  height: 23em;
  margin-top: -11.5em;
  /* Set to a negative number 1/2 of your height*/
  margin-left: -15em;
  /* Set to a negative number 1/2 of your width*/
  background: rgba(44, 44, 44, .7);
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <title>
    Testing text
  </title>
  <link href="default.css" type="text/css" rel="Stylesheet" />
  <script language="JavaScript">
    function CloseErrorBox() {
        document.getElementById('dialog_bg').style.display = 'none';
    }
  </script>
</head>

<body style="height: 100%; width: 100%;">
  <div id="dialog_bg">
    <div id="dialog">
      <div style="height: 100%; min-height: 100px; width: auto; min-width: 10%; background-color: #454545;">
        <span id="error_title" style="width: 100%; height: auto; color: #cacaca; font-size: 25pt; text-align: center;">
            ALERT
          </span>
        <div style="height: 100%; width: auto; background-color: #cacaca; margin-top: 10px; padding: 10px;">
          <div id="error_text" style="color: #454545; overflow-y: auto; max-height: 125px; text-align: center;">
            You might need to edit this to make it work for your picture, but you can also use this as a error box
          </div>
          <br />
          <br />
          <button id="dialog_close_btn" onclick="CloseErrorBox()" style="height: 45px; width: 80%; border: 2.5px solid #CACACA; background-color: rgba(25, 25, 25, 0.5); color: #CACACA; font-size: 15pt; font-family: 'Ubuntu', sans-serif; border-radius: 5px;">
              OK
            </button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

希望这有帮助！

中心在屏幕中心加载图像

2 个答案: