块状元素水平垂直居中问题
来源：8-10 CSS3中的动画--过渡延迟时间 transition-delay
慕运维2603834
2015-10-10 11:23
top: 50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
这里面又是位置移动（top left）又是位移移动（translate），好乱啊 看不懂
写回答
关注
1回答
-
- 妹魅
- 2015-12-22 08:56:57
首先是position:absolute, 固定布局，top:50%,left:50%,你会发现这个块状元素并没有居中，
但是块状元素的左上角是相对于画面居中的，transform:translate(-50%, -50%)的作用是相对于块状元素本身发生位移，分别会向左向上移动块状元素自身的50%，这时你会发现块状元素的中心位置移到了原来的左上角位置，所以居中了
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242696 学习 · 2623 问题
相似问题