装载机元件始终处于居中位置

Question

我有一个像这样的非常简单的装载机

<i class="icon-refresh icon-spin"></i> //font awesome

我在所有的ajax请求中使用它。 ajax请求的响应与.html()一起插入到请求本身定义的不同dom元素中，它可以通过最小的div作为整个页面。

我的问题是我想将装载机始终放在目标元素，中心宽度和中间高度的中间位置。

有什么想法吗？

Answer 1

这更像是一个css问题：

.containerForAjaxContent { position: relative; }
.icon-refresh.icon-spin { position:absolute; top:50%; left:50%; }

关于绝对定位的说明：

  

所以，让我们通过一系列简单的步骤来总结这一点 - 找到包含的内容   阻止一个位置为绝对的元素，这就是你需要的   做：

     

查看绝对定位元素的父元素   该元素的position属性具有相对值之一，   绝对的还是固定的？

     

如果是，您已找到包含块。

     

如果没有，请移至父母的父元素并从步骤1开始重复   直到找到包含块或用完祖先。

     

如果你在没有找到定位的情况下到达了html元素   祖先，然后包含块是html元素。

来源：http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Containing_blocks