html中的可变大小块,使用CSS和HTML的垂直和水平居中的可变大小的图像放大（以div为单位）...

因此对于很多年来，我一直在努力实现这一目标。基本上我的网站允许管理员上传目录中每个项目的缩略图和放大图像。缩略图显示在顾客看到的页面上，放大显示在缩略图的悬停上。使用CSS和HTML的垂直和水平居中的可变大小的图像放大(以div为单位)

我无法控制正在上传的图像的大小(我想我可以限制宽度和高度，但在这种情况下这是不实际的)。

我想垂直和水平居中这个图像放大。它包含在与position: fixed;的div中。我相信，(虽然我没有在那一刻我前面的代码)，我目前使用类似以下内容：

.image-enlargement

{

position: fixed;

left: 50%;

top: 50%;

width: 300px;

height: 400px;

margin-left: -150px;

margin-top: -200px;

}

我可能已经改变了它使用jQuery - 我可以”不过请记住，很久以前，我上次在网站上的这一点上工作过。现在我想要对上面的代码做的是取出宽度，高度和边距规格，以便允许图像(无论大小)精确居中，并且不使用JavaScript。

有没有人曾经实现过这个？如果是这样，怎么样？我确信必须有某种方法来实现这个结果，但还没有遇到纯粹的CSS/HTML解决方案。

+0

只是增加了一个JSFiddle与我最近的尝试 - obv因为-50％的边距使用容器的宽度/高度，所以它不起作用。尽管如此，我应该相对容易地看到我正在尝试做什么。 –

2011-01-27 03:17:43

+0

可能重复的[如何水平和垂直居中div？](http://stackoverflow.com/questions/4325643/how-to-horizo​​ntal-vertical-center-a-div) –

2011-01-27 03:22:26

+0

另请参见http：// stackoverflow .com/questions/2726219/position-div-center-horizo​​ntal-and-vertical和http://stackoverflow.com/questions/2498552/horizo​​ntal-and-vertical-center-text-in-html和http：// stackoverflow .com/questions/4416130/how-to-center-a-div-vertical和http://stackoverflow.com/questions/4460677/css-trick-for-centering-horizo​​ntal-and-vertical ...等。 –

2011-01-27 03:23:08