塊狀元素水平垂直居中問題
top: 50%;
? left:50%;
? -webkit-transform: translate(-50%,-50%);
? transform: translate(-50%,-50%);
這里面又是位置移動(dòng)（top left）又是位移移動(dòng)（translate），好亂啊 看不懂
慕運(yùn)維2603834
2015-10-10
1 回答
舉報(bào)
0/150
提交
取消
2015-12-22
首先是position:absolute, 固定布局，top:50%,left:50%,你會(huì)發(fā)現(xiàn)這個(gè)塊狀元素并沒有居中，
但是塊狀元素的左上角是相對(duì)于畫面居中的，transform:translate(-50%, -50%)的作用是相對(duì)于塊狀元素本身發(fā)生位移，分別會(huì)向左向上移動(dòng)塊狀元素自身的50%，這時(shí)你會(huì)發(fā)現(xiàn)塊狀元素的中心位置移到了原來的左上角位置，所以居中了