居中问题，麻烦老师解答
来源：2-3 主体上面的图片
DemiMurphy
2019-07-20 15:35:39
老师，针对页面布局案例，关于居中问题，我有以下疑惑：
.main .toplayer-top{
width:500px;
height: 300px;
background: blue;
position: absolute;
/*如果有两个绝对定位的元素，都是已脱离了文本流，那么就需要给有需要的一个设置一个更高的属性，让它展示出来。*/
z-index:2;
/*top:400px;*/
/*margin-top: -150px;*/
/*right:50%;*/
/*margin-right: -250px;*/
top:50%;
left:50%;
margin-top: -150px;
margin-left: -250px;
}
1）用注释的代码，出现的效果是，蓝色部分与图片垂直中间。
2）根据以前老师教过的其他垂直方法（代码中加粗部分），为什么蓝色部分是与整个页面垂直居中呢？
有个疑问，一个页面是不是相当一个盒子？还是每一块都可以作为一个盒子？比如header为一个盒子，main为一个盒子，footer为一个盒子？？？
如果每一小块都可以作为一个盒子，那么为什么使用我的方法居中（加粗代码）会出现相对于整个页面垂直居中而不是相对于图片居中？？？
<图1是注释代码的效果； 图二是加粗代码效果>
1回答
-
同学你好，
1、第一种居中方式顶部使用固定计算实现居中是因为祖先元素没有定位，那么元素就会相对于视口进行定位，需要设置固定值，（也可以实现居中，比较麻烦，因为要计算）
第二种方式中，父级也没有设置相对定位，所以也是相对于视口进行定位的，所以设置50%是在页面中居中的（不是在图片区域），
如果要用第二种方式让蓝色盒子实现居中，只需要让蓝色盒子相对于main元素进行定位就可以了。
代码参考：
2、每一块内容都可以设置为一个盒子，比如同学提到的比如header为一个盒子，main为一个盒子，footer为一个盒子，如果里面的内容相对于外层盒子实现居中，可以给外层盒子设置相对定位，（使用第二种方式定位就可以）
如果帮助到了你，欢迎采纳~祝学习愉快~
0
相似问题