关于transform

.main{

width: 500px;

height: 500px;

position: relative;

left: 200px;

top: 200px;

background-color: #CCCCCC;

}

.trunk{

width: 200px;

height: 200px;

background-color: white;

position: absolute;

left: 50%;

transform: translateX(-50%);

top:50%;

transform: translateY(-100px);

}

关于这段代码，为什么达不到我想要的预期，就是trunk这个div 垂直居中与main这个div

饿少 2021-02-10

源自：CSS定位 7-6 项目作业

12

收起

1回答

好帮手慕燕燕回答被采纳获得+3积分 2021-02-10 13:40:03

同学，你好！CSS样式要结合HTML代码一起使用，只有样式无法调试，同学需将HTML代码粘贴在此处，便于老师定位问题

祝：学习愉快！

饿少提问者 #1

就是main是父div，trunk是其子div

2021-02-10 13:41:25
好帮手慕燕燕回复提问者饿少 #2
同学，你好！transform: translateY(-100px);相当于transform: translate(0, 100px);，前面的transform: translateX(-50%);样式被覆盖，因此只有上下居中，左右不居中，使用transform: translate(-50%, -50%);同时设置X轴和Y轴即可，代码如下：
```
.trunk{
	width: 200px;
	height: 200px;
	background-color: white;
	position: absolute;
	left: 50%;
	#transform: translateX(-50%);
	top: 50%;
	#transform: translateY(-50%);

	transform: translate(-50%, -50%);
}
```
祝：学习愉快！
2021-02-10 14:07:35

相似问题

transition,transform

为什么需要设置transform-origin:50% 0;呢？

关于一个transform的问题

关于transform

transform-style属性

登录后可查看更多问答，登录/注册

Python全栈工程师2020

参与学习人
提交作业 5211 份
解答问题 2433 个

Facebook曾声称“只招全栈工程师”！全栈用人需求猛增，市面人才紧缺。 0基础进击Python全栈开发，诱人薪资在前方！

本课精华内容

问答作业

关于在装饰器里面使用return func 和 return func()的问题

24 1

老师,我不明白为啥这里会报错

22 1

彩票项目的base模块写入函数

28 1

random区间问题

28 2

请教

18 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载