预加载器图像动画不居中

Question

我的预加载器图像不在圆圈内居中，在小屏幕上，perloader根本不居中。我试过重新计算汽车保证金似乎没什么用。如何在不旋转圆圈的情况下让图像保持在内部并将预加载器集中在一起。

#load_cover {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	background-color: rgba(0, 0, 0);
	z-index: 10000;
}
.loaderInner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0px 0px -50px;
}
.logo {
	position: absolute;
	background-image: url("https://placeholdit.imgix.net/~text?txtsize=5&txt=40%C3%9745&w=40&h=45");
	background-repeat: no-repeat;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin: -50px 0px 0px -50px;	
}
.loader {
	border: 4px solid #838383;
	border-radius: 50%;
	border-top: 4px solid #dddddd;
	width: 60px;
	height: 60px;
	-webkit-animation: spin 0.6s linear infinite;
	animation: spin 0.6s linear infinite;
	box-shadow: 0 0 1px #999;
	filter: blur(0.7px);
}
 @-webkit-keyframes spin {
 0% {
-webkit-transform: rotate(0deg);
	 transform: rotate(0deg);
}
 100% {
-webkit-transform: rotate(360deg);
	 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>

Answer 1

你可以这样做。

我取出.logo并将图像作为.loaderInner的背景放置，然后定位图像中心。

＆＃13;

＆＃13;

#load_cover {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	background-color: rgba(0, 0, 0);
	z-index: 10000;
}
.loaderInner {
background-image: url("https://placeholdit.imgix.net/~text?txtsize=5&txt=40%C3%9745&w=40&h=45");
background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	/*margin: -50px 0px 0px -50px;*/
  transform: translate(-50%, -50%);
}

.loader {
	border: 4px solid #838383;
	border-radius: 50%;
	border-top: 4px solid #dddddd;
	width: 60px;
	height: 60px;
	-webkit-animation: spin 0.6s linear infinite;
	animation: spin 0.6s linear infinite;
	box-shadow: 0 0 1px #999;
	filter: blur(0.7px);
}
 @-webkit-keyframes spin {
 0% {
-webkit-transform: rotate(0deg);
	 transform: rotate(0deg);
}
 100% {
-webkit-transform: rotate(360deg);
	 transform: rotate(360deg);
}
}
 @keyframes spin {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}

＆＃13;

<div id="load_cover">
  <div class="loaderInner">
    <div class="loader"></div>
    <div class="logo"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;