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

调试子元素在父元素中心点后，为什么“用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果”？

而我改变margin相对应的下右却没什么效果...

qq_慕工程4033419

2020-06-27

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

关注问题我要回答

847

操作

收起

2 回答

慕哥00470507
2020-06-30

设置完50%50%后，大盒子的中心点在子盒子的左上角。下一步的代码需要将子盒子的中心点移到现在子盒子的左上角(这样就满足需求了)，那中心点到左上角的距离就是长和宽的一半，相对于大盒子向上和向左移动，所以topmargin-100 leftmargin-100 就可以了

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

收起回答

慕娘1049553

top margin -100px是上移，相反为什么bottom margin 100px不能上移，左右的也是，不管输了什么数值位置都不会发生改变

2020-09-07 回复有任何疑惑可以回复我~

B仔xbbz

你评论的最后，那是相当于小盒子向上向左移动了吧，不是大盒子，你仔细比划比划

2021-05-24 回复有任何疑惑可以回复我~

B仔xbbz 回复慕娘1049553

bottom中文是底部的意思，就是说向下了，你说怎么会向上移

2021-05-24 回复有任何疑惑可以回复我~

qq_棠梨煎雪故人来_03907185
2020-06-29

你的top和left只是规定了小盒子在大盒子中的起始位置，相当于小盒子最左上角那一个小点定位在大盒子的正中心，可你需要的是把小盒子的中心和大盒子的中心重叠，所以你现在的结果和你想要的结果间差了小盒子长和宽的一半，将margin设为负的长和宽的一半，小盒子的中心就能与大盒子中心重叠了。

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

收起回答

0/150

提交

取消

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

参与学习 1225812 人
解答问题 18234 个

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

进入课程

本课相似问答

1 回答水平居中是给父元素的

3 回答为啥给上和左都位移-50%距离，就能达到垂直水平居中的效果。

4 回答父元素和水平居中

2 回答为什么父元素要position:relative;？我父元素和子元素都position:absolute;好像效果都一样？

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

搜索更多本课相关问答

调试子元素在父元素中心点后，为什么“用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果”？

我要回答关注问题

热搜

最近搜索清空

调试子元素在父元素中心点后，为什么“用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果”？

2 回答

本课相似问答

调试子元素在父元素中心点后，为什么“用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果”？