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