将图片在div中进行水平和垂直对齐
要进行水平对齐，只需在父级元素的样式中指定：
text-align: center;
注意，是在父级元素的样式中指定，而不是在img本身的样式中指定。
要进行垂直对齐，相对来说则麻烦得多。期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的，在img元素本身的样式中指定也同样行不通（你在网上查到的方法都是这样）。真正有效的方法如下：
首先，由于vertical-align: middle这个样式是只有在display样式以inline-block模式起作用时才会生效，因此，你必须先得让display的inline-block生效才行。而inline-block要生效，则同一行必须至少有两个元素才行，因为只有两个元素在一起才能形成“内联”的关系。
因此，你需要在图片的同一行放置另外一个元素，并对这个元素进行样式指定：
vertical-align:middle;
display:inline-block;
height:100%;
这里height设置为100%，表示让这个元素的高度充满其父级（也是图片的父级）。这样，当这两个元素以其自身的高度中心线对齐时，自然就正好位于父级元素的垂直中心位置。
完整的HTML代码如下：
<div id="header1">
<span id="span1"></span>
<img src="1.png">
</div>
完整的CSS代码如下：
#span1{
vertical-align:middle;
display:inline-block;
height:100%;
}
img {
vertical-align: middle;
}
这里使用的这个位于同一行的额外的元素是span，你用别的元素也可以，比如label、b等等，只要当这个元素的height属性被设置为100%时确实可以充满父级元素的高度即可。