将任何图像居中于静态位置答案

【问题标题】：Center any image in a static position将任何图像居中于静态位置
【发布时间】：2015-08-05 22:35:19
【问题描述】：

好吧，我找不到任何令人满意的答案来解决我的问题，所以我尝试发布它。

我需要单击我网站上的任何图像，并在具有不透明背景的静态视口中以全尺寸显示它。

我的实际代码是这样的：

= link_to hide_image_path, :remote => :true, :title => "Close" do
  .full_screen_image
  .opaque
    %img.image-middle{:src => UrlSafeBase64.decode64(image), :alt => ""}

使用以下 .CSS

/*这个片段会提供一个静态的半透明灰色层，并且运行正常*/

.full_screen_image {
  position: fixed;
  background-color: #6c6c6c;
  opacity: 0.8;
  z-index: 2000;
  top: 5%;
  left: 5%;
  bottom: 5%;
  right: 5%;
}

/* 这应该在前一层之上提供一个 100% 不透明的层

.opaque {
  position: relative;
  z-index: 2005;
  opacity: 1;

}

/*最后一张是图片

.image-middle {
  position: static;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

嗯， - 图像是 100 不透明的，这是正确的，但是 - 如 .image-middle 规则所述，它位于四周而不是屏幕中心 - 第一层不滚动（这是预期的行为） - 图像滚动（这不是预期的行为）

我只需要使用 CSS/HTML 就可以达到预期的结果，没有 Jquery/Jscript

【问题讨论】：

能否给我们一个有效的链接或图片，好吗？很难理解您所说的“四处定位”是什么意思。
你设置了 position:static => 会随着滚动条滚动；到处都是什么意思？图像是否重复？
你可以在下面看到我的解决方案，但静态是一个错误。现在这并不重要，但是对于“周围的图像”，我打算每次一张图像，不尊重 .image-middle CSS 中的定位，而是随机显示：有时在右侧溢出，有时在右侧溢出左边。它们也位于页面底部下方。

标签： html css center centering

【解决方案1】：

您可以使用 jquery 来实现这一点。

<script>
            $(document).ready(function() {
                $('.popup-with-zoom-anim').magnificPopup({
                    type: 'inline',
                    fixedContentPos: false,
                    fixedBgPos: true,
                    overflowY: 'auto',
                    closeBtnInside: true,
                    preloader: false,
                    midClick: true,
                    removalDelay: 300,
                    mainClass: 'my-mfp-zoom-in'
            });
        });
        </script>

将此添加到您的 HTML 代码中，它将显示一张图片，单击图片将显示完整尺寸的图片

<div class="mfp-hide">
            <div id="small-dialog1" class="pop_up">
                <h2>work1</h2>
                <img src="yourpic.JPG" alt="images "/>


        <div class="gallerylist-wrapper">               
                <a class="popup-with-zoom-anim" href="#small-dialog1">
                    <img src="yourpic.JPG" height="200px" width="200px"  alt="Image 1"/>
                    <span><img src="yourpic.JPG" alt="image "/> </span>
                    <div class="desc">

                    </div>
                    </a>
                    </div>

【讨论】：

您好 Brendom，感谢您的回答，但这并不好，因为要求只使用 CSS 而不是 JQuery/JScript。

【解决方案2】：

好吧，KISS就是我的答案！

正确的代码如下

= link_to hide_image_path, :remote => :true, :title => "Close" do
  .full_screen_image
  %img.image-middle{:src => UrlSafeBase64.decode64(image), :alt => ""}

使用以下 2 个 CSS 规则（注意它是固定的，不是静态的！）：

.full_screen_image {
  position: fixed;
  background-color: #6c6c6c;
  opacity: 0.8;
  z-index: 2000;
  top: 5%;
  left: 5%;
  bottom: 5%;
  right: 5%;
}

.image-middle {
  position: fixed;
  opacity: 1;
  z-index: 2005;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

感谢您的帮助，我希望这个解决方案可以帮助其他有类似问题/疑问的人。

【讨论】：