包含ul列表的盒子实现水平居中

Question

想实现一个水平居中的ul条，ul和li分别显示不同的背景色，并且水平居中。

想法是：分别给ul和li设置background-color属性，然后li水平排列。然后外面套个div盒子水平居中。

但是给div使用margin: 0 auto;的水平居中方法实现不了。只能用绝对定位的方法。但是使用绝对的定位方法又不知道盒子的宽度，用transform:translate(-50%,0);，据说兼容性不太好。

代码在这里

想问：

1.为什么第一种方法对本例实现不了水平居中？
2.有没有更易行的实现方法？

谢谢~

Answer 1

你是要第一种还是第二种？

第一种和第二种不同的地方就是我注释掉的那行css代码

不用那么麻烦，我的css

        * {
            margin: 0;
            padding: 0
        }

        .link {
            text-align: center;
            /* background-color: #666; */
        }

        ul {
            background-color: #666;
            padding: 10px;
            display: inline-block;
        }

        .hyperlink {
            display:inline-block;
            margin: 10px;
            list-style: none;
            background: #ccc;

            border-radius: 3px;
        }
        .hyperlink>a {
            text-decoration: none;
            color: rgba(33, 114, 214, 0.8);
        }

Answer 2

margin: 0 auto;的前提是要给这个元素设置width，定宽居中;

Answer 3

div是块级元素，你的div要有宽，其次设置宽度然后加上margin: 0 auto;意思是上下间距是0，左右是自动，这样就会水平居中；

Answer 4

• {margin:0;padding:0}

.link {
margin: 0 auto;
/*position: absolute;
left: 50%;
transform:translate(-50%,0);*/
}

ul {
width:100%;
background-color: #666;
padding: 10px;
display: inline-block;
text-align:center;
}
ul::after{
content: "";
clear: both;

}

.hyperlink {

    display:inline-block;
    margin: 10px;
    list-style: none;
    background: #ccc;
    
    border-radius: 3px;

}
.hyperlink > a {

    text-decoration: none;
    color: rgba(33, 114, 214, 0.8);

}