CSS一个简单的问题，大神进来轻松拿分！
0
悬赏园豆：30
[已关闭问题]
解决于 2017-08-17 21:29
这个水平居中是怎么实现的？还是没有理解啊，这个父元素left：50%和子元素left:50%到底是怎么偏移的啊，正50%是相对父亲元素向右偏移吧，那么这个是怎么实现居中的？求大佬画图解释下！
水平居中总结-不定宽块状元素方法（三）
除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
这个水平居中是怎么实现的？还是没有理解啊，这个父元素left：50%和子元素left:50%到底是怎么偏移的啊，正50%是相对父亲元素向右偏移吧，那么这个是怎么实现居中的？求大佬画图解释下！
其他回答(1)
0
楼上的图没毛病，首先你需要理解relative。
relative是相较于dom本身定位。
而父元素的float的作用是使父元素脱离文档流，也就是说在忽略body的影响下使父元素的left: 0,top: 0;
此时在结合relative你应该就能明白为什么50%之后，dom处于居中状态了
