html怎么让div垂直和水平居中显示

首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。
实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px，边框为红色。以便我们观察效果。

你应该是把 hover写到了 a 标签上，所以需要对a做一些定义。
ul li a { display:block; width:li的宽度, height:li的高度，line-height:li的高度}
display:block让a变成块级元素，可以跟div一样有高度、宽度、行高，否则宽度、高度是无效的。
line-height 与 height 一致，可以让单行的文本垂直居中。

1、首先在html编辑器中新建一个html文件，写入一个div并给div设置class属性，然后在div里面设置一个无序列表：

2、接着设置一下div的样式，给它一个宽度和高度及背景颜色即可。然后设置div中的ul的属性的display的属性值为table，之后在设置margin的值上下边距为0，左右为auto，ul列表就居中了：

3、最后打开浏览器查看效果，可以看到div中的列表诗句中的。以上就是html无序列表在div中居中的方法介绍：

水平居中的意思也就是全部（上下左右）居中：、
用到的css样式：text-align；line-height；
如：
<div><li>1</li><li>2</li><li>3</li></div>
相应css代码：
div{ width:500px;height:100px;float:left}
div li{ width:100px;height:100px;float:left;text-align:center;line-height:100px}

---