position:absolute居中问题
canvas {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #abcdef;
}
老师我发现以下三种写法的效果一致，是为什么呢？
canvas {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #abcdef;
}
canvas {
position: absolute;
display: block;
margin: auto;
background: #abcdef;
}
canvas {
position: absolute;
display: block;
background: #abcdef;
}
为什么把上下左右设置为0还要再加上margin:auto才可以实现居中呢？应该是position:absolute造成的吗？
30
收起
正在回答
2回答
定位元素实现居中的方式不止一种，这也是其中一种，这种方式的代码两个关键点：
1、上下左右均0位置定位；
2、margin: auto
记住就可以了~
相似问题
登录后可查看更多问答，登录/注册
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星