通常情况li上加float:left是为了让标签并排显示，如果不加的话默认就是换行的
而上面加position:
relative;
left:
-50%;这个可能是写代码的人想让每个标签都向左移动一半的位置，有点像是书页或者纸张层叠的效果，也许可以不用相对定位来处理，可以加例如margin-left:-100px;一样可以达到效果，只不过这样需要把li的宽度固定，要不然就效果不太好了
再来说一下让标签居中的样式好了，其实上面加的
有点问题，加了position:
relative;
left:
50%;就没必要加
float:left;
了而且应该是无效的
还有就是position:
relative;
left:
50%;并不能达到真正居中的效果，因为这样加只是以标签的左边线为中心，实质效果是标签是偏右的，如果非要让标签用position来实现居中的话，那么就应该是下面这种样式，例如：
你把这段标签直接放入body中试试就能看到了，div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中，还是使用常用方法吧margin:0
auto;，尽量少用position属性来设定，
而上面加position:
relative;
left:
-50%;这个可能是写代码的人想让每个标签都向左移动一半的位置，有点像是书页或者纸张层叠的效果，也许可以不用相对定位来处理，可以加例如margin-left:-100px;一样可以达到效果，只不过这样需要把li的宽度固定，要不然就效果不太好了
再来说一下让标签居中的样式好了，其实上面加的
有点问题，加了position:
relative;
left:
50%;就没必要加
float:left;
了而且应该是无效的
还有就是position:
relative;
left:
50%;并不能达到真正居中的效果，因为这样加只是以标签的左边线为中心，实质效果是标签是偏右的，如果非要让标签用position来实现居中的话，那么就应该是下面这种样式，例如：
你把这段标签直接放入body中试试就能看到了，div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中，还是使用常用方法吧margin:0
auto;，尽量少用position属性来设定，
温馨提示：内容为网友见解，仅供参考
第1个回答 2021-01-10
Vue实践-CSS样式position/display/float属性对比使用
相似回答
