0
我的預加載器圖像沒有居中在圓圈內，並且在小屏幕上，加載器不在中心。我試圖重新計算汽車利潤似乎沒有任何工作。我怎樣才能讓圖像留在裏面而不用旋轉，並將預加載器放在一起。預加載器圖像動畫不集中
#load_cover {
\t width: 100%;
\t height: 100%;
\t position: fixed;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t right: 0;
\t margin: auto;
\t text-align: center;
\t background-color: rgba(0, 0, 0);
\t z-index: 10000;
}
.loaderInner {
\t position: absolute;
\t top: 50%;
\t left: 50%;
\t margin: -50px 0px 0px -50px;
}
.logo {
\t position: absolute;
\t background-image: url("https://placeholdit.imgix.net/~text?txtsize=5&txt=40%C3%9745&w=40&h=45");
\t background-repeat: no-repeat;
\t width: 60px;
\t height: 60px;
\t top: 50%;
\t left: 50%;
\t margin: -50px 0px 0px -50px; \t
}
.loader {
\t border: 4px solid #838383;
\t border-radius: 50%;
\t border-top: 4px solid #dddddd;
\t width: 60px;
\t height: 60px;
\t -webkit-animation: spin 0.6s linear infinite;
\t animation: spin 0.6s linear infinite;
\t box-shadow: 0 0 1px #999;
\t filter: blur(0.7px);
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
\t transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
\t transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div id="load_cover">
<div class="loaderInner">
<div class="loader"></div>
<div class="logo"></div>
</div>
</div>
你切緣陰性，應爲身高的一半和寬度。目前你的寬度和高度是'60px'，而你的負邊距是'-50px'。他們應該是'-30px'。另外，你的微調器有* no *負餘量，這意味着你將它的左上角對齊到中心，而不是中心到中心。但是我的真實建議是：放棄絕對定位，並留有餘地：**使用flexbox **。 – Santi