1、第一种css代码如图所示。display设置成table-cell，text-align为center，垂直居中设置vertical-align为middle。
2、打开浏览器查看结果，图片已处于正中状态。
3、第二种方法css代码如图。div设置成相对定位，img设置成绝对定位，然后left:50%，top:50%，此时图片的左上角将位于div的中心。重点：图片向上移动图片高度的一半，并向左移动图片宽度的一半。正好为与div正中间。
4、在浏览器查看结果，图片水平，垂直均居中。
使用CSS 语法要设定一个div 水平置中，是很常见到的需求，最多人使用margin: 0 auto这个方法就可以达成。但是，如果要让一个div 同时间做到在网页上水平置中还要垂直置中，也就是CSS 上下左右置中这就有点麻烦了，不太容易喔！
利用table中内容在单元格中默认垂直居中的特性。
2.利用css3中的transform属性
3.利用margin属性
4.利用利用position属性把left，top，right，bottom四个的值设为0，再用margin:auto
最好把你的代码改写了一下，并实现居中效果
效果图
1、首先先打开我们的开发环境新建一个web项目。
2、在html中引入css文件这里是html页面的代码div和ul。
3、将所有标签的margin和padding初始为0然后将父级div的display设置为flexalign-items设置为center。
4、运行web项目后得到的结果如图所示垂直居中了。
5、 将display设置为table-cell，将vertical-align设置为middle即可。
6、将ul的高度设置为百分比然后使用相对定位设置top为二分之一的百分之百减去ul的高度即可。
7、使用line-height将其设置div的高度必须是确定值，然后将li左或者右浮动即可。
