CSS で親ボックスに子ボックスをネストし、子ボックスを親ボックスを基準にして絶対的な位置に配置し、ネストされた子ボックスを中央に配置するには、次の手順に従います。
1. 親ボックスと子ボックスのHTML構造を作成します。
2. CSS を使用して、親ボックスを相対位置に設定します (`position:relative;`)。
3. 子ボックスを絶対配置に設定します (`position:Absolute;`)。
4. `top`、`left`、`right`、`bottom` プロパティを使用して、親ボックス内の子ボックスの位置を調整し、中央揃え効果を実現します。
以下に例を示します。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 300px;
height: 200px;
background-color: lightgray;
position: relative; /* 父盒子相对定位 */
}
.child {
width: 100px;
height: 100px;
background-color: coral;
position: absolute; /* 子盒子绝对定位 */
top: 50%; /* 相对于父盒子的上边缘向下移动 50% */
left: 50%; /* 相对于父盒子的左边缘向右移动 50% */
transform: translate(-50%, -50%); /* 通过负偏移来使子盒子居中这是关键 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<!-- 这里是子盒子的内容 -->
</div>
</div>
</body>
</html>