定位居中

top left 百分百不都是根据包含块的高及算的吗为什么50% 50%可以进行居中设置

慕九州8427191 2018-07-02

源自：CSS定位（position） 4-1 定位和边距的区别以及弹出层的简单实例

17

收起

3回答

好帮手慕星星 2018-07-03 10:52:53

视图不一定是正方形才能左上角在中间显示，比如长方形：设置top和left为50%之后就是这样的，左上角占据的是外层大盒子宽的一半，高的一半的交点。

提问者慕九州8427191 #1

top left的百分比不是由父元素高计算吗那么左上角top%50=300*0.5=150 left%50=300*0.5=150

2018-07-03 22:27:30
好帮手慕星星回复提问者慕九州8427191 #2

left是由父元素的宽计算的，600*50%=300

2018-07-04 09:22:46
提问者慕九州8427191 回复好帮手慕星星 #3

谢谢了

2018-07-04 09:26:20

提问者慕九州8427191 2018-07-03 10:10:00

都是对高的50% 应该是500 500才对

好帮手慕星星 2018-07-03 09:57:05

top和left值设置为50%之后，是盒子的左上角在正中间，不是整个盒子哦，显示是这样的

如果想要盒子在正中间，还需要设置margin-top和margin-left为负值（盒子宽高的一半），如下：

自己可以再看下视频，祝学习愉快~~

提问者慕九州8427191 #1

这top和left值设置为50%之后，向下和左移动相同距离，视图不是正方形，盒子的左上角怎么在在正中间

2018-07-03 10:08:15

相似问题

想问一下什么时候使用设置绝对定位的方式来设置元素居中

为什么middle没有设置定位，就能够直接使用margin：0 auto？

关于背景图片的引入以及垂直居中有一些问题

marginauto不就能设置居中了吗，为什么还要设置左右距离为0？

怎样实现自适应且定位居中

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号