4-5编程？元素居中的冲突问题

*{margin:0;padding:0;list-style-type:none;}
div.big{text-align:center;}
h3{background:#dbdbdb;padding:8px;border:thin solid #BDC4DE;margin-left:30%;margin-right:30%;}
ul{display:none;}
.div1:hover ul{display:block;}
.div2:hover ul{display:block;}
.div3:hover ul{display:block;}

这是我最先写的代码，后来发现不论给哪里（ul或相对应的class值）添加border属性，弹出的列表都没有边框。

当改变h3的属性定义之后，即：

h3{width:100px;border:1px solid pink;}         
 ul{display:none;width:100px;border:1px solid pink;}

结果又不居中显示

但是加上“margin:quto;"之后，又可以居中显示。这是为何？

h3{width:100px;border:1px solid pink;margin:auto}         
 ul{display:none;width:100px;border:1px solid pink;margin:auto;}