完全居中图像？

Question

我有一个div和div内的图像。图像大小会有所不同。

我希望它水平和垂直居中。 Css垂直对齐似乎不起作用。

任何诡计？我可以使用PHP，CSS或jQuery的

Answer 1

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

当你实现了图像的格内的“背景图片”，你可以轻松地与“背景位置”居中：

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

Answer 2

你可以得到它通过使用

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' });