居中位置：固定 div答案

【问题标题】：Centering a position:fixed div居中位置：固定 div
【发布时间】：2023-12-08 23:15:01
【问题描述】：

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

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

有什么办法吗？

【问题讨论】：

标签： css position fixed centering

【解决方案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，一旦我们知道图像已加载，我们就可以确定它的宽度和高度，并将其向左和向上推这些值的一半。这会将它直接放在屏幕的中心。我在那里添加了一些动画的东西为了漂亮:)

【讨论】：

【解决方案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;
}

覆盖 100% 的固定位置 div。

【讨论】：