要使相对定位元素在其父级元素内垂直居中，我们可以使用以下步骤：
- 首先，将父级元素设置为相对定位，以使其成为相对定位元素的参考点。
- 接下来，将要垂直居中的元素设置为相对定位，并将其上下偏移量都设置为 50%。
- 最后，将该元素的 margin-top 设置为其高度的一半的负值，以使其在垂直方向上居中。
以下是一个完整的 HTML 页面 UTF-8 示例，其中包含了相对定位元素在其父级元素内垂直居中的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Centering a Relative Positioned Element Example</title>
<style>
.parent {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
}
.child {
position: relative;
width: 100px;
height: 100px;
background-color: red;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>在上面的示例中，我们首先创建了一个具有固定宽度和高度的父级元素，并将其设置为相对定位。然后，我们在其中创建了一个子元素，并将其设置为相对定位。在这里，我们将该元素的宽度和高度都设置为 100px，并将其背景色设置为红色。
接下来，我们将该子元素的上偏移量设置为 50%，以使其垂直居中。我们还将其 margin-top 设置为其高度的一半的负值，即 -50px，以确保其在垂直方向上居中。
通过这些步骤，我们可以将相对定位元素在其父级元素内垂直居中。
正文完