css定位属性百分数 |css淡灰色代码

div {
position: relative; /* 父元素设置为相对定位 */
width: 300px;
height: 200px;
}
p {
position: absolute;
top: 50%; /* 距离父元素顶部距离为50% */
left: 50%; /* 距离父元素左侧距离为50% */
transform: translate(-50%, -50%); /* 改变p元素自身定位，使其居中 */
}

在上面的代码中，p元素的top和left属性值分别为50%。这意味着p元素距离父元素顶部和左侧的距离均为父元素宽度和高度的50%。如果父元素的宽度和高度分别为300px和200px，则p元素相对于父元素的位置为150px和100px。

需要注意的是，当父元素的宽度和高度改变时，p元素的位置也会随之改变。

为了让p元素始终居中，可以使用transform属性的translate()函数，该函数可以根据元素自身定位的距离和比例值进行偏移量的计算。在上述代码中，-50%表示偏移量为元素宽度和高度的50%。