居中定位：固定div

我一直在尝试几天来确定一个位置：固定元素，网络上的很多解决方案都被找到了，但是由于效率低下或者我自己的经验不足，他们都没有工作。居中定位：固定div

该情景如下;我想制作一个图像遮阳板，每当你点击一个图像时，一个固定的div可见，拿着所述图像，这实际上是通过JavaScript完成的。无论您使用的是哪种分辨率，我都希望居中div时发生问题。

#galleryimage{ 
    position:fixed; 
    z-index:200; 
    display:none; 
    max-height: 100%; 
    max-width: 100%; 
} 

#galleryimage img{ 
    max-width:100%; 
    max-height:100%; 
}

的图像的宽度和高度都是未知变量，我不与JS足够的经验来处理它，所以我想用纯CSS来做到这一点。但是，我永远无法将它置于中心位置。保证金不会工作，并且具有负边距的公式也不会，因为我不知道这些图像的宽度和高度变量。

任何解决方案？

来源

2014-02-19 Fushimi

我会为此使用JavaScript + jQuery，以使生活更轻松。这里有一个很好的起点：

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    </head> 
    <style> 
     #galleryimage{ 
     position:fixed; 
     z-index:200; 
     height: 100%; 
     width: 100%; 
     opacity: 0; 
     } 

     #galleryimage img{ 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     } 

    </style> 
    <body> 

     <div id="galleryimage"> 

     <img src="" /> 

     </div> 

    </body> 
    <script type="text/javascript"> 

     $(document).ready(function(){ 

     loadGalleryImage('your_image_name.jpg'); 

     }); 

     function loadGalleryImage(src){ 

     $("#galleryimage img").on('load', function(){ 

      $(this).css({marginTop: -($(this).height()/2), marginLeft: -($(this).width()/2)}); 
      $("#galleryimage").animate({opacity:1}, 200); 
      $("#galleryimage img").off('load'); 

     }); 

     $("#galleryimage img").attr('src', src); 

     } 

     function hideGalleryImage(){ 
     $("#galleryimage").animate({opacity:0}, 200); 
     } 

    </script> 
    </html>

这使用了一些技巧。在CSS中，图像绝对定位并放置在顶部和底部的50％处。然后，使用jQuery，一旦我们知道图像被加载，我们可以确定它的宽度和高度，并将它向左和向上推移一半。将它直接放置在屏幕的中心。我在那里添加了一些动画的东西，可爱:)

来源

2014-02-19 20:20:15 koosa

您可以使用display：table-cell垂直对齐中间的东西。尽管如此，你必须让div伸展到固定位置的100％。我已经做了一个快速的jsfiddle：

http://jsfiddle.net/fm2GD/2/

基本上，你必须有一个表格单元格的图像：

#tableCell{ 
    height: 100%; 
    width: 100%; 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

这是一个 “表”：

#table{ 
    height: 100%; 
    width: 100%; 
    display:table; 
}

它涵盖了100％的固定位置分区。

来源

2014-02-19 20:34:02 Josh

居中定位：固定div

回答

相关问题