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

子元素设置 position:relative 和 left: -50% 来实现水平居中

求大神解释下这个left:-50%是怎么来的？主要是这个负号

这你都晓得

2016-06-13

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

关注问题我要回答

3981

操作

收起

2 回答

Lx5416 回答被采纳 +3 积分
2016-06-13

父元素%50让你的子元素从中线开始,效果是子元素显示在中间偏右, 所以你的子元素要向左偏一点,-50%就是向左偏子元素宽度的一半,这样就居中了

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

收起回答

这你都晓得提问者

非常感谢！

2016-06-13 回复有任何疑惑可以回复我~

妙言

这个部分可以理解，但是为什么不用right:50%呢？

2016-06-13 回复有任何疑惑可以回复我~

Lx5416 回复妙言

right:50%效果是蓝色正方形的右边和黄色矩形右边的距离为蓝方块宽度一半看图,蓝方块右边和黄方块右边的距离不是50%,而是跟屏幕宽度有关

2016-06-15 回复有任何疑惑可以回复我~

查看2条回复

慕盖茨4805442
2016-06-13

可以理解当前位置为100%， -50% 后退到50%的父元素宽度，如果子元素宽度为100px，居中需要设置：-50%-50px

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

收起回答

0/150

提交

取消

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

参与学习 1227128 人
解答问题 18247 个

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

进入课程

本课相似问答

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

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

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

4 回答父元素和水平居中

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

搜索更多本课相关问答

子元素设置 position:relative 和 left: -50% 来实现水平居中

我要回答关注问题

热搜

最近搜索清空

子元素设置 position:relative 和 left: -50% 来实现水平居中

2 回答

本课相似问答

子元素设置 position:relative 和 left: -50% 来实现水平居中