gpt4 book ai didi

html - 物化中的居中预加载器

转载 作者:太空狗 更新时间:2023-10-29 14:54:52 26 4
gpt4 key购买 nike

鉴于此:

我想将此预加载器与 position:fixed 和居中一起使用。所以我所做的是:

.loader {
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<body>
<div class="preloader-wrapper big active loader">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</body>

这会导致动画 :-/

最佳答案

只要您的容器声明了宽度和高度,这就会使元素水平和垂直居中。 JSfiddle

.loader {
position: absolute;
top :0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

关于html - 物化中的居中预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40419598/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com