1、首先我们准备好一个空的html结构的文档，如下图所示
2、接下来我们要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框，如下图所示
3、接下来我们就在div中添加内容，如下图所示，运行后你会发现内容偏向于左上角
4、下面我们给div设置水平居中，如下图所示，并且设置行高为div的高度，你会发现它水平垂直居中了
5、除了上面的方法外还有一种方法就是改变div的属性，让其display属性为table-cell，我们知道table单元格中可以通过vertical-锾攒揉敫align垂直居中，转化后也可以用此属性，如下图所示
6、但是运用display转化后你会发现margin的auto属性不起作用了，这种情况你可以根据浏览器设置居中或者运用bootstrap的栅栏系统进行布局
7、综上所述，将div的内容垂直居中主要2种方式，第一种是设置line-height，第二种是设置display为table-cell