如何在更大的div内制作图像中心（垂直和水平）
我有一个200×200像素的div。 我想在div的中间放置一个50 x 50像素的图像。
如何做呢？
我可以通过使用text-align: center来对其进行水平居中。 但垂直对齐是问题。
就我个人而言，我会将它作为div中的背景图像，即CSS的内容：
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
（假设id="demo"的div，因为您已经指定了height和width添加background不应该成为问题）
让浏览器承受压力。
在旧版浏览器中工作（IE> = 8）
绝对位置结合自动保证金允许水平和垂直居中元素。 元素位置可以基于使用相对定位的父元素位置。 查看结果
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
另一种方法是创建一个包含valign的table ，当然。 无论你是否知道div的高度，这都可以工作。
<div>
<table width="100%" height="100%" align="center" valign="center">
<tr><td>
<img src="foo.jpg" alt="foo" />
</td></tr>
</table>
</div>
但只要可能，你应该始终坚持使用css 。
上一篇: How to make an image center (vertically & horizontally) inside a bigger div