完全居中图像？

Question

我在div中有一个div和一个图像。图像大小会有所不同。

我想让它水平和垂直居中。 Css verticle align似乎不起作用。

任何诡计？我可以使用php，css或Jquery

Answer 1

您可以使用

使其水平对齐

margin: 0 auto;

使用CSS（至少不在IE6 / 7中）不容易垂直居中。使用表格可以相对容易。

你说你有jQuery可用。您可以通过应用JavaScript来启动任何浏览器。但当然，如果没有启用/支持JS，您的页面将无法正确显示。

CSS的vertical-align属性仅用于display: table-cell（其本身应与display: table有关）的内容。

如果你有

<div id="container"><img src="my-image.png" alt="" /></div>

您可以使用jQuery将其置于此中心（如plexus的建议所示）

var imageSrc = $('#container img').attr('src');

$('#container').css({ backgroundImage: 'url(' + imageSrc + ')', backgroundPosition: 'center enter' });

Answer 2

我不知道你是如何使用它的，所以我的解决方案可能不合适。

当您在div中将图像实现为“背景图像”时，可以使用“background-position”轻松将其居中：

#div {
background-image: url(./image.png);
background-position: center center;
}