2、使用margin：auto，方法:
1、使用位移方法，兼容性较低，移动端慎用
2、组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。
3、用弹性布局实现垂直左右居中
第一步:在img标签后面添加一个span元素
第二步:为这几个元素设置样式
1.把#div1元素设置text-align:center
2.把添加的元素span转化为行内块元素(display:inline-block)，并且设置vertical-align:middle
3.为img元素设置vertical-align:middle。
完成以上操作之后，这个Img元素在#div1中就是垂直居中的了，这种方法的兼容性等比较好，唯一的缺点可能就是要在元素后面添加一个元素
(注意：这个元素最好是span元素，如果是div元素的话，在低版本ie下有兼容问题)
这种方法利用了css3的新特性
为#div1设置display:flexvertical-align:middlealign-items:middle。
这种方法的缺点就是只要不支持css3的浏览器，那就不会起作用了。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
div{
width:100px
height:100px
background:green
position:absolute
top:50%
margin-top:-50px
left:50%
margin-left:-50px
}
</style>
</head>
<body>
<div></div>
</body>
</html>
垂直和水平居中，只要垂直居中的话css最后两行可以不要，如果要相对父级盒子垂直居中的话，给父级盒子设置position:relative
