问答详情
源自：8-10 CSS3中的动画--过渡延迟时间 transition-delay

块状元素水平垂直居中问题

top: 50%;

  left:50%;

  -webkit-transform: translate(-50%,-50%);

  transform: translate(-50%,-50%);

这里面又是位置移动（top left）又是位移移动（translate），好乱啊 看不懂


提问者：慕运维2603834 2015-10-10 11:23

个回答

  • 妹魅
    2015-12-22 08:56:57

    首先是position:absolute, 固定布局，top:50%,left:50%,你会发现这个块状元素并没有居中，

    但是块状元素的左上角是相对于画面居中的，transform:translate(-50%, -50%)的作用是相对于块状元素本身发生位移，分别会向左向上移动块状元素自身的50%，这时你会发现块状元素的中心位置移到了原来的左上角位置，所以居中了

    2