我有一个 html 页面，在每个页面重新加载时我想显示一个后台加载器图标。我使用了引导微调图标，但无法将其添加到页面中心。<html><style> .overlay { background-color:#EFEFEF; position: fixed; width: 100%; height: 100%; z-index: 1000; top: 0px; left: 0px; opacity: .5; filter: alpha(opacity=50); display: none; }</style><body><div class="overlay"> <div class="d-flex justify-content-center"> <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;"> <span class="sr-only">Loading...</span> </div> </div></div><!-- here goes the main content --><!-- here goes the main content --></body></html>
4 回答
翻过高山走不出你
TA贡献1875条经验 获得超3个赞
您必须像这样删除display: none并调整顶部位置：
.overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 40%;
left: 0px;
opacity: 0.5;
filter: alpha(opacity=50);
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="overlay">
<div class="d-flex justify-content-center">
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- here goes the main content -->
</body>
</html>
www说
TA贡献1775条经验 获得超8个赞
像这样添加“align-items-center”类。
<div class="overlay d-flex justify-content-center align-items-center">
<div class="">
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
偶然的你
TA贡献1841条经验 获得超3个赞
这是一种直接的方法，对我来说是最好的方法:)
超文本标记语言
<div class="myspinner">
<div class="spinner-border" role="status">
</div>
</div>
CSS
.myspinner {
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
JS 小提琴演示：https://jsfiddle.net/36xrf9mp/5/
FFIVE
TA贡献1797条经验 获得超6个赞
这是解决方案CSS
.overlay {
background-color: #EFEFEF;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: .5;
filter: alpha(opacity=50);
}
- 4 回答
- 0 关注
- 146 浏览
添加回答
举报
0/150
提交
取消