使用父相子绝 设置子元素top：50%，没反应

如果设置子元素的top属性为50%没有反应，可能有以下几个原因：

1. 父元素没有设置高度。如果父元素没有设置高度，子元素的top属性无法定位，因为浏览器无法确定50%是多少像素。

2. 父元素不是定位元素。如果父元素没有设置position属性或者设置为static，子元素的top属性无法生效。必须将父元素的position属性设置为relative、absolute或fixed中的一个。

3. 子元素的margin或padding属性影响了top属性的定位。如果子元素的margin或padding属性设置了非零值，它们会影响子元素的实际高度，从而影响top属性的定位。

你可以检查一下以上几个方面，看看是不是其中的原因导致子元素的top属性无法生效。

相关问题

left:50%;top:50%;

`left:50%;top:50%;` 是一种将元素定位到父元素的中心的方式。

具体来说，`left:50%;` 表示元素的左边缘距离父元素的左边距离为父元素宽度的一半，即将元素的左边缘定位到父元素的水平中心位置。而 `top:50%;` 表示元素的上边缘距离父元素的上边距离为父元素高度的一半，即将元素的上边缘定位到父元素的垂直中心位置。

但是，这种定位方式只是将元素的中心点定位到父元素的中心，并不能实现水平和垂直居中。可以使用 `transform` 属性来实现元素的水平和垂直居中，例如：

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这里的 `transform: translate(-50%, -50%);` 表示将元素向左平移自身宽度的一半，向上平移自身高度的一半，从而实现元素的水平和垂直居中。

position: absolute; right: 50%; top: 50%;

position: absolute; 是CSS中的一个定位属性，用于指定元素的定位方式。当一个元素设置了position: absolute;时，它会脱离文档流，并相对于其最近的已定位祖先元素进行定位。

right: 50%; 表示元素距离其最近的已定位祖先元素的右边界的距离为该祖先元素宽度的50%。

top: 50%; 表示元素距离其最近的已定位祖先元素的上边界的距离为该祖先元素高度的50%。

这样设置后，元素将会以其最近的已定位祖先元素为参考点，水平居中于祖先元素，并垂直居中于祖先元素。