Html 以图像为中心的CSS

是的，我知道这已经被问了无数次了，我已经阅读了几乎所有我能找到的帖子，但仍然没有解决我的具体问题。在一个有缩略图悬停的分类广告网站上，我需要将悬停的图像水平居中于页面中心，垂直于浏览器窗口。到目前为止，当我在浏览器中水平居中时，垂直方向在页面上居中，通常比窗口长得多，因此图像显示在屏幕外或顶部边缘。如果我将它垂直居中，那么它水平地跟随悬停，并以这种方式离开屏幕

这些图像虽然在下面的HTML示例中类似，但都是动态加载的，可能会有不同的高度，这是问题的一部分，因为我不能简单地指定高度。它可以归结为最后两个带有绝对值的CSS块，这会导致垂直居中而不是水平居中。使用“固定”可以水平对齐，但通常会垂直离开屏幕。有什么想法吗

<p><div class="image-container">
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2079.jpg" alt="hpim2079.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2079.jpg" alt="hpim2079.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2080.jpg" alt="hpim2080.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2080.jpg" alt="hpim2080.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2081.jpg" alt="hpim2081.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2081.jpg" alt="hpim2081.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2082.jpg" alt="hpim2082.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2082.jpg" alt="hpim2082.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2083.jpg" alt="hpim2083.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2083.jpg" alt="hpim2083.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2084.jpg" alt="hpim2084.jpg" width="69" height="52" /><img class="large-image-style" src="/images/classifieds/68/hpim2084.jpg" alt="hpim2084.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2115.jpg" alt="hpim2115.jpg" width="70" height="53" /><img class="large-image-style" src="/images/classifieds/68/hpim2115.jpg" alt="hpim2115.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2116.jpg" alt="hpim2116.jpg" width="70" height="53" /><img class="large-image-style" src="/images/classifieds/68/hpim2116.jpg" alt="hpim2116.jpg" width="323" height="244" /></a>
<a class="mouseover-thumbnail-holder" ontouchstart=""><img src="/images/classifieds/68/thumbnails/hpim2117.jpg" alt="hpim2117.jpg" width="70" height="53" /><img class="large-image-style" src="/images/classifieds/68/hpim2117.jpg" alt="hpim2117.jpg" width="323" height="244" /></a>
</div>

---

你所要做的就是使用

margin:0auto但请确保它在图像上有一个宽度
我认为这可能适合您。不要在包围图像的
a.mouseover-thumbnail-holder
元素上设置
position:relative
，而是通过在
上设置
position:fixed
使定位使用根元素作为参考点

如果将所有偏移设置为零，然后在图像上使用
margin:auto
，它将在视图端口中垂直和水平居中


.image容器{
显示：块；
保证金：0自动25px自动；
文本对齐：居中；
宽度：85%；
边框：1px点蓝色；
}
a、 鼠标悬停缩略图支架。大图像样式{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
不透明度：0；
背景色：#000000；
边界半径：25px；
边框：10px双倍#FF0000；
指针事件：无；
过渡：一切都很轻松；
}
a、 鼠标悬停在缩略图上：悬停。大图像样式，
a、 鼠标悬停缩略图夹持器：活动。大图像样式{
不透明度：1；
}
.填料{
高度：500px；
边框：1px点蓝色；
}
顶部填充。。。
底部填充…
您正在尝试将所有这些图像居中吗？谢谢，不，所有小缩略图都已居中。我正在尝试将悬停时的较大图像居中到可视屏幕的中心。实际上，它并不一定要像这样居中，但当它全部或部分离开屏幕时，它确实需要完全在屏幕上。图像的宽度不同，因此不能在CSS中轻松完成，但img src标记正在动态地拉长宽度。这就是你的意思吗？这个例子作为一个片段运行时效果很好，但我不清楚这些标记的用途。他们似乎只是创建了500px的空白，而这是页面无法拥有的，但也许我误解了，所以你能澄清一下吗？缩略图上方是根据项目描述文本的长度而变化高度的文本，因此无法指定高度。
.filler
元素用于显示图像如何放置在具有滚动内容的页面上。这两个
.filler
仅用于演示。我想确保无论滚动条设置在何处，大图像都会出现在屏幕中央。直到现在我才看到你的后续内容，但很有趣的是，我的大脑是如何工作的：今天早上5:30我突然醒来，意识到填充课，正如你所说，仅代表我页面的其余部分，而不是答案的一部分。只使用样式（而不是填充），它可以完美地工作！谢谢大家!@DonP非常欢迎您，享受即将到来的假期和/或相关休息时间！我希望你的假期也很愉快。还有一个问题。它是否可以水平居中于页面而不是容器上？我在一个两列相册上使用了相同的代码，其中，容器水平居中会导致左边缘或右边缘离开屏幕或在菜单后面。
@media screen and (orientation: portrait) {
    img.ri { max-width: 90%; }
}

@media screen and (orientation: landscape) {
    img.ri { max-height: 90%; }
} 

.image-container {
    display: block;
    margin: 0 auto 25px auto;
    text-align: center;
    width: 85%;
}

a.mouseover-thumbnail-holder {
    position: relative;
}

.large-image-style {
    position: relative;
    top: auto; bottom: auto; left: 0; right: 0;
    margin: auto;
    background-color: #000000;
    border-radius: 25px;
    border: 10px double #FF0000;
}

a.mouseover-thumbnail-holder .large-image-style {
    position: absolute;
    display: inline-block;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
}

a.mouseover-thumbnail-holder:hover  .large-image-style , a.mouseover-thumbnail-holder:active .large-image-style {
    position: absolute;
    z-index: 100;
    opacity: 1;
}