图片对齐
首先看文本居中方式：
上下居中：给文字一个line-height,最好和文字盒子大小相同。
左右居中：给文字一个text-align:center;
考虑到文字与图片对齐用到基线对齐，所以图片在盒子里居中的方式为：
text-align和line-height放在父级元素里，在img标签里放与行内元素基线对齐。
div{
width:200px;
height:200px;
text-align:center;
line-height:200px;
}
img{
width:100px;
vertical-align:middle;
}
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>元素对齐
元素在父元素里的居中方式：和图片类似，加一个inline-block，把其变成行内元素。
div{
width:200px;
height:200px;
text-align:center;
line-height:200px;
}
p{
display:inline-block;
width:100px;
height:100px;
width:100px;
vertical-align:middle;
}<body>
<div>
<p></p>
</div>
</body>