我在我的 <app-root> 中实现了一个简单的微调器的 index.html这样就好像在幕后发生了一些事情，而不是在我的应用程序完全加载之前出现空白页面。
但是，我似乎无法让它在页面中心垂直对齐。我不想影响应用内容的加载方式，因为它们本身是垂直居中的。
有什么我想念的吗？
我想将微调器嵌套在另一个 div 中并将其设置为具有特定高度，然后以该高度为中心，但这似乎不是一个优雅的解决方案。
我也考虑过使用:
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
然而，事情是这样的，它似乎是根据整体的左上角设置定位div区域，因此无论微调器有多大，都会向左和底部偏移。
Codepen for just centred horizontally
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);
在这里我决定，因为微调器基于定义元素宽度/高度的“正方形”的左上角居中，所以简单地向后移动实际宽度的一半是有意义的&高度。
最佳答案
.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)，它将具有可见区域的大小和绝对位置(以便它覆盖所有内容) 然后将微调器放入容器中。
附言相信我，它足够优雅，也是必须拥有的(容器 <div> )，因为无论您在做什么，您都必须有某种容器，您的微调器将按其尺寸对齐。如果您使用的是 Angular2，则可以将带有叠加层的微调器以及所有相关的 html 和样式放在单独的组件中，以便在您的根目录中 index.html它看起来就像<spinner></spinner>
关于javascript - 在 app-root 中垂直对齐我的加载程序 - Angular2+，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52052840/