不定宽 块状元素居中3

Posted 2020-09-02

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

 

 

<style>   父元素
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{      子元素
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;}



浮动和相对定位 
使不定宽块状元素居中