好吧..所以我有点新手但不是真的。在“04-06”中做了很多 html 编码.. 决定再次拿起它。如果我没有道理，请告诉我。我有一位客户想要为他们的照片制作一个“灯箱”效果图片库。例如:当您单击缩略图时，更大的图片会放大，而背景会逐渐淡出。我决定看看我是否可以在 css3 中编写代码，而不是求助于 javascript 或诸如此类的东西。我知道这可能不切实际.. 但是客户没有那么多图片并且想要一个相当简单的网站。
大部分情况下进展顺利……除了引入大局。我希望这张照片位于页面的中央。但是当我从 0px 过渡到 400px 时，发生了一些愚蠢的事情。它似乎向右和底部生长，而左侧和顶部保持不动。任何使它成长为中心的方法。我知道我可以跳过宽度和高度调整并只使用不透明度过渡。但这看起来并不那么酷。
这只是早期阶段，所以我还没有用其他浏览器进行测试。我知道我需要添加更多代码才能在其他浏览器中工作。但我现在正在使用 chrome如果有帮助的话。
<!DOCTYPE html>
<html>
<head>
<title>LIGHTBOX</title>
<style>
html{
height:100%;
}
img{
max-height:100%;
max-width:100%;
}
.centerimage{
display:block;
margin-left:auto;
margin-right:auto;
}
#imagezoom {
position: absolute;
margin:-200 0 0 -200;
top:50%;
left:50%;
z-index:-1;
padding-right:0;
border: solid 5px white;
overflow: hidden;
width: 0px;
height: 0px;
opacity: .0;
box-shadow: 0px 0px 500px 50px #888888;
transition: opacity .7s, width 1.5s, height 1.5s;
}
#imagezoom:target{
z-index:2003;
width: 400px;
height: 400px;
opacity: 1.0;
}
</style>
</head>
<body>
<div id="imagezoom">
<a href="file://localhost/Users/hollykrahulik/Desktop/
test%20website%20stuff/lightbox2.html">
<img src="images/grumpycat.jpg">
</a>
</div>
<a href="#imagezoom">
<img src="images/grumpycat_thumb.jpg" class="centerimage">
</a>
</body>
</html>
最佳答案
您刚刚在 #imagezoom 上错过了这个 margin:-200 0 0 -200;。
编辑: 我假设你想要这个作为输出。 Working Fiddle
#imagezoom:target{
margin:-200px 0 0 -200px;
}
#imagezoom {
transition: opacity .7s, margin 1.5s, width 1.5s, height 1.5s;
}
关于html - 使用过渡调整高度和宽度时如何使 <div> 或 img 居中(保持居中)。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16227117/