                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

父元素设置float，来设置水平居中怎么理解

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

qq_格格_7

2020-01-13

源自：初识HTML(5)+CSS(3)-升级版 15-7

关注问题我要回答

1339

操作

收起

5 回答

楪木雨回答被采纳 +2 积分
2020-01-16

我的理解是给父元素设置float:left是先让这个块到最左边，然后设置position:relative 是让块可以相对于原位置移动，之后设置left:50%，也就是让块离整个页面的最左边50%，最后的结果就是块的左边贴着整个页面的中线，之后再设置子元素position:relative，也就是让子元素相对于现在的位置（即此刻父元素的位置）可以移动，再设置left: -50% ，相当于子元素相对

于父元素的左边移动了半个父元素块的距离，就达到了居中的效果。（理解和表达不对的地方希望指正）

20 回复有任何疑惑可以回复我~

#1

一个大憨憨

我想知道为什么这里没有给div标签设置宽度，但是显示的时候是随文本内容来变化的，不应该是和body标签宽度一样吗？

2020-02-23 回复有任何疑惑可以回复我~

#2

为什么left: -50%代表子元素相对于父元素的左边移动了半个父元素块的距离，不是相对于父元素来说，子元素在父元素原来的位置上相对想左移动50%？

2020-03-20 回复有任何疑惑可以回复我~

呼呼厚
2020-03-20

为什么left: -50%代表子元素相对于父元素的左边移动了半个父元素块的距离，不是相对于父元素来说，子元素在父元素原来的位置上相对想左移动50%？

0 回复有任何疑惑可以回复我~

慕慕2402854
2020-03-10

并不是。注意看文字解释。首先是分为三层。第二层ul的最左边对准第一层父元素div的中间线，第三层li的中间线对准第二层ul的最左边。

0 回复有任何疑惑可以回复我~

金刚无敌葫芦娃
2020-03-04

理解了，因为这个父元素的宽度为0.实际上先向右50%，父元素就在中间这条线上了，然后再向左50%，就是0的50%还是原地没动，还是蹲在中间线，如果父元素有宽度的话，就会偏移中线

0 回复有任何疑惑可以回复我~

慕用1572225
2020-03-03

谢谢图示这下清楚了

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1222136 人
解答问题 18206 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

3 回答水平居中设置-行内元素

3 回答水平居中设置-行内元素?

1 回答水平居中设置-行内元素

1 回答水平居中设置-定宽块状元素

4 回答定宽块状元素_水平居中设置

搜索更多本课相关问答

父元素设置float，来设置水平居中怎么理解

我要回答关注问题

意见反馈帮助中心 APP下载