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

top: 50%;

left:50%;

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

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

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

慕运维2603834

2015-10-10

源自：十天精通CSS3 8-10

关注问题我要回答

2193

操作

收起

1 回答

妹魅
2015-12-22

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

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

2 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

十天精通CSS3

参与学习 242177 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

进入课程

本课相似问答

1 回答translate水平垂直居中

2 回答如何达到水平垂直居中

4 回答关于块状元素<div>居中的问题？？？

4 回答为什么ul的行高只有在50px时可以使li标签水平垂直居中

1 回答如何让分割线垂直居中？

搜索更多本课相关问答

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

我要回答关注问题

热搜

最近搜索清空

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

1 回答

本课相似问答

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