transform: translate(-50%, -50%);-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：15-4 面试常考题之宽高不定实现盒子水平垂直居中

LeeSin_King123

2020-04-29 22:08

transform: translate(-50%, -50%);它代表x，y轴的话，不应该是向下和向左移?

写回答关注

3回答

五月的夏天

2020-04-30 21:23:21

你好,坐标轴x轴是从右往左为正,y轴是从上往下为正

1 1

慕仙9531...

translate 默认以自己的中心点为原点(0，0)，你误导人了。 rotations, scaling or skewing, that need a specific point as a "transform-origin". 参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

2020-05-04 17:04:22

共 1 条回复 >
慕婉清0893021

2020-05-02 10:50:27

HTML元素的坐标系是以页面左上角为原点，正右方向是 x 轴正方向，正下方向是 y 轴正方向。
所以这行代码是向左、向上移动。
另外， z 轴方向是正对着屏幕外的我们。?

0 10
慕慕6563243

2020-04-30 14:29:56

可能吧

0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

相似问题

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

回答 3

transform: translate(-50%, -50%);语句无效，

回答 1

不管是已知宽高的盒子还是宽高不定的盒子都可以用 transform: translate(-50%, -50%);来实现水平垂直居中吧？

回答 6

回答 3

cols="50" rows="10"

回答 3

打开慕课网App查看更多内容