Css 中心ajax加载程序

我正在尝试使ajax加载程序居中。但是没有运气。加载器出现在屏幕的右角。感谢您的帮助。下面是代码

div.amshopby-overlay {
    background-color: #fafafa;
    height: 100%;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 555;
}
div.amshopby-overlay img {
    top: 100px;
    left: 45%;
    display: block;
    position: absolute;
}

div.amshopby-overlay div {
    margin: 0 auto;
    display: block;
    width: 300px;
    height: 200px;
    background:  url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
}

---

因此，我假设amshopby覆盖中的div包含加载程序图像。试一试：

div.amshopby-overlay div {
  display: block;
  width: 300px;
  height: 200px;
  background:  url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
  /* Add this */
  position: absolute;
  top: 50%;
  margin-top: -100px;
  left: 50%;
  margin-left: 150px;
}

基本上，顶部和左侧将推动div从顶部和左侧移动50%。我们将在垂直和水平方向的中心添加-50%的div width和height值。试试看。希望有帮助。

试试这个css

<div class="container">
    <img src="loader.gif" class="loader">
</div>

<div class="container">
    <img src="http://placehold.it/150x150" class="loader">
</div>

“margin:auto”应该为您提供所需的定心样式。CSS详细信息如下

HTML JSFIDLE

---

当我对中的只是一个图像时，我喜欢做的一个解决方案是使用css背景属性：

HTML

---

现在在您的javascript中，在发出ajax请求时添加类

加载器

，并在完成后删除该类。

您可以添加更多的

html

代码吗？或者添加一个工作的JSFIDLE演示程序来了解更多信息。谢谢我从css文件中复制了这个。扩展名几乎没有phtml和js文件。不知道该提供哪一个。

<div class="container">
    <img src="http://placehold.it/150x150" class="loader">
</div>

.container {
     /*Absolute positioning will now be relative to this tag*/
     position:relative; 

     /*Arbitrary Height*/
     height:300px;
     width:300px;

     /*border to show container*/
     border: 1px solid;
 }

.loader {
    /*Allow top, left, right, bottom 
    to be set relative to container*/
    position: absolute;

    /*Set edges of tag so margin auto knows the max boundry*/
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    /*Allows the use of margin auto*/
    display: block;

    /*Horizontally and vertically centered
    (Display block will fill remaining margin space equally)*/
    margin: auto;
}

<div id="container"></div>

#container.loader{
    background:url('loader.gif') center center no-repeat;
}