如何根据当前视口位置在特定div中居中图像？ [英] How to center image in the specific div according to current viewport position?

问题描述

我在使用ajax加载内容时尝试创建漂亮的动画。我想在使用内容重新加载div期间使用显示图标，但是我不知道是否可以只使用CSS。

图标应该： / p>

1. 水平地始终位于带有内容的div的中心


2. 内容的可见部分


3. 应在整个动画期间保留在隐藏菜单的幻灯片动画期间的可见部分内容的垂直中心。

如果根据内容的可见部分进行垂直居中是不可能的，则可以根据视口

：这是我的小提琴： http://jsfiddle.net/QWB9x/74/ 和可能应该更改的部分：

  .loading #img_loading {
 position：fixed; 
 top：50％; 
 left：50％; 
 display：block; 
} 
  

解决方案

）

  function loadNewContent（）{
 $（loaderCont）。removeClass $ b} 
 
 $（document）.ready（function（）{
 
 $（＃hide_button）。 $ b $（this）.closest（。bottom）。toggleClass（left_hided）; 
 $（loaderCont）。toggleClass（left_hided2）; 
}）; 
 
 $（＃filter1，＃filter2，＃filter3，＃filter4）。on（click，function（）{
 $（loaderCont）。addClass ）; 
 setTimeout（loadNewContent，2000）; 
}）; 
}）; 
  

CSS：

 code> .header {
 background-color：Green; 
 width：100％; 
 margin-bottom：20px; 
 height：100px; 
} 
 .left {
 background-color：Red; 
 float：left; 
 width：100px; 
} 
 .left_hided .left {
 margin-left：-85px; 
} 
 .right {
 background：Aqua url（http://i.imgur.com/ifyW4z8.png）50％repeat-y; 
 width：calc（100％ -  140px）; 
 float：right; 
} 
 
 .left_hided .right {
 width：calc（100％ -  55px）; 
} 
 
输入{
 float：right; 
} 
 
 .loaderCont {
 background-color：rgba（255，0，0，0.6）; 
 height：100％; 
 width：calc（100％ -  140px）; 
 position：fixed; 
 right：0; 
 top：0; 
 z-index：-1; 
} 
 
 .left_hided2 {
 width：calc（100％ -  55px）; 
} 
 
 #loader {
 background：url（http://i.stack.imgur.com/FhHRx.gif）no-repeat center center; 
 position：relative; 
 top：calc（50％ -  16px）; 
 left：calc（50％ -  16px）; 
 display：block; 
 height：32px; 
 width：32px; 
} 
 
 .loading {
 z-index：9001; 
} 
  

JSFiddle： http://jsfiddle.net/ZRwzr/1/

I am trying create nice animation during loading content using ajax. I want to use display icon during reloading div with "Content", however I can't figured out is it possible to do that only with CSS.

Icon should:

1. horizontally always in the center of div with "Content"
2. vertically always in the center of "visible part of content"
3. should stay during whole animation in the vertically center of "visible part of content" during slide animation which hides Menu.

If vertical centering according to "visible part of content" is not possible, it would be ok to center image according to viewport of the browser.

[EDIT]:

Here is my fiddle: http://jsfiddle.net/QWB9x/74/ and the part which probably should be changed:

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}

解决方案

This works best for me :)

function loadNewContent(){
 $(".loaderCont").removeClass("loading")
}

$(document).ready(function () {

 $("#hide_button").on("click", function () {
      $(this).closest(".bottom").toggleClass("left_hided");
      $(".loaderCont").toggleClass("left_hided2");
 });

 $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
     $(".loaderCont").addClass("loading");
     setTimeout(loadNewContent, 2000);
 });
});

CSS:

.header {
    background-color: Green;
    width: 100%;
    margin-bottom: 20px;
     height: 100px;
}
.left {
    background-color: Red;
    float: left;
    width: 100px;
}
.left_hided .left{
    margin-left: -85px;
}
.right {
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
    width: calc(100% - 140px);
    float: right;
}

.left_hided .right{
     width: calc(100% - 55px);
}

input{
    float:right;
}

.loaderCont {
    background-color: rgba(255, 0, 0, 0.6);
    height: 100%;
    width: calc(100% - 140px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.left_hided2 {
     width: calc(100% - 55px);
}

#loader {
    background: url(http://i.stack.imgur.com/FhHRx.gif) no-repeat center center;
    position: relative;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    display: block;
     height: 32px;
     width: 32px;
}

.loading {
    z-index: 9001;
}

JSFiddle: http://jsfiddle.net/ZRwzr/1/

这篇关于如何根据当前视口位置在特定div中居中图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！