在应用程序根目录内垂直对齐我的加载器-Angular2 +

Question

我在index.html <app-root>中实现了一个简单的微调器，以至于似乎幕后正在发生某些事情，而不是空白页面，直到我的应用程序完全加载为止。

但是，我似乎无法使其在页面中央垂直对齐。 我不想影响我的应用程序内容在垂直居中时的加载方式。

有什么我想念的吗？

我想到了将微调器嵌套在另一个div并将其设置为特定的高度，然后在其中居中，但这似乎不是一个很好的解决方案。

我还考虑过使用：

display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

此解决方案的Codepen

但是，从外观上看，它是基于整个div区域的左上角设置位置的，因此，无论微调器有多大，它似乎都向左和向左偏移。

Codepen只需水平居中

的index.html

<!doctype html>
<html lang="en">
<head>
  <style>
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid red;
      width: 120px;
      height: 120px;
      animation: spin 1s linear infinite;
      margin: auto;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
  <meta charset="utf-8">
  <title>BettingUi</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:400,500" rel="stylesheet">
</head>
<body>
  <!--<app-root>-->
    <!--
      This will display a loader while the app is loading - in case of slow connection
      We cannot use an Angular component here as it will only be displayed after loading
      all component - so direct HTML here is the best case for this.
    -->
    <div class="loader"></div>
  <!--</app-root>-->
</body>

</html>

更新我确实设法为此找到了解决方案：

display: inline-block;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 60px);

在这里，我决定，因为微调器是基于“正方形”的左上角居中的，该“正方形”定义了元素的宽度/高度，因此将边缘简单地折回实际宽度和高度的一半是有意义的。

最终密码笔

Answer 1

 .parent{ height:90vh; display:flex; postion:absolute; } .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid red; width: 120px; height: 120px; animation: spin 1s linear infinite; margin: auto ; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container { background: grey; margin: auto; align-items: center; } body { background: grey; }

 <div class="parent"> <div class="loader"></div> </div>

这将达到预期的效果，当进行微调时，我的策略是首先创建一个透明容器（在示例中为.parent），该容器的可见区域的大小和位置的绝对值（以使其覆盖所有内容）以及之后将微调器放置在容器中。

PS相信我，它足够优雅，也是必须拥有的（容器<div> ），因为无论您在做什么，都必须具有某种容器，微调器将根据这些容器对齐。 如果您使用的是Angular2，则可以将带有叠加层以及所有相关html和样式的微调器放在单独的组件中，以便在根index.html看起来像<spinner></spinner>

在应用程序根目录内垂直对齐我的加载器-Angular2 +

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-28 08:14:42

在应用程序根目录内垂直对齐我的加载器-Angular2 +

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-28 08:14:42

解决方案1
0 已采纳 2018-08-28 08:14:42