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的浏览器，那就不会起作用了。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<style>标签中，输入css代码：body {text-align:center}，在<script>标签中输入js代码：
var a = ($(document).height() - $('form').height()) / 2
$('form').css('margin-top', a + 'px')
3、浏览器运行index.html页面，此时form标签成功在页面中水平垂直居中了。
使用flex网格布局，这样就很简单了,代码如下：
<div class="flexbox"><div class="child">垂直居中</div>
</div>
css代码，关键就在这：
.flexbox {height:300px
width:300px
display: flex
justify-content: center
align-items: center
}
这是css3对浏览器各大版本的兼容性如下：
