html+left属性,HTML+CSS入门 浅析top、left、transform属性的translate方法百分比都是相较谁而言的...

本篇教程介绍了HTML+CSS入门 浅析top、left、transform属性的translate方法百分比都是相较谁而言的，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

top、left、transform属性的translate方法，他们的百分比都是相较谁而言的？

top、left是基于父元素的：

.parent {

position: relative;

background-color: rgb(243, 225, 225);

height: 100px;

width: 240px;

}

.child {

text-align: center;

width: 100px;

background-color: cornflowerblue;

position: absolute;

left: 50%;

top: 50%;

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

}

translate的参数：left(x 坐标) 和 top(y 坐标) 位置参数 ，

如果是百分比，会以本身的长宽做参考

top:0; left:0的时候：

把left设置成 50% 的时候，div.child的左、上距离就是div.parent的宽度的一半；

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！