如何让div下的ul标签水平居中？

Question

绿色部分是一个div，里面的内容是ul标签下的两个li标签，如何水平居中？

我试过将div 设为{position：relative；}
ul设为{

 position：absolute；
 top: 20px;
 left: auto;
 }

结果是这样：

求解！

Answer 1

如果设置position：absolute的话会导致该元素脱离文档流，即造成你那样的效果；
可以将ul设置成 display:inline-block;
然后给ul的父元素添加 text-align:center样式就好；

我总结过些水平居中的例子，可以参考下：http://blog.zhangyulei.site/2016/03/22/%...

Answer 2

设置ul的宽度，并且让ul的margin-left和margin-right都为auto

Answer 3

给ul套一个div，设置这个div内边距上下为0，左右自动。

Answer 4

设置ul的宽度=li的宽度总和

ul{
    width:200px;/*自己设置ul的宽度*/
    position:absolute;
    left:50%;
    margin-left:-100px;/*设置ul的宽度的一半*/
}