Question

我一直在努力争取一个位置：固定元素，网络上已经找到了很多解决方案但是，由于效率低下或者我自己缺乏经验，它们都没有用。

情景如下;我想制作一个图像遮阳板，每当你点击图像时，一个固定的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做。但是，我永远无法让它居中。边距不起作用，带负边距的公式也不会，因为我不知道这些图像的宽度和高度变量。

任何解决方案？

Answer 1

我会使用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，一旦我们知道图像被加载，我们就可以确定它的宽度和高度，然后向左和向上推动这些值的一半。这将它直接放在屏幕的中心。我在那里添加了一些动画内容以获得美观：）

Answer 2

您可以使用display：table-cell垂直对齐中间的内容。你必须让div伸展到固定位置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;
}

涵盖固定位置div的100％。

中心位置：固定div

2 个答案: