声明：以下の内容は個人的な研究の要約であり、本来の意図は彼ら自身の研究とレビュー記録を促進することです。間違いがあれば訂正してください！
効果を得るには（緑のボックス（子ボックス）を赤のボックス（親ボックス）の中央に表示します）：
1.ポジショニング：息子と父
一般に、子ボックスは絶対位置を使用し、親ボックスは相対位置を使用します。他のコードを少し追加するだけです。
方法1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 800px;
height: 500px;
border: 1px solid red;
/* 父盒子相对定位，占据位置 */
position: relative;
}
.box2 {
width: 300px;
height: 150px;
border: 1px solid green;
/* 子盒子绝对定位，不占据位置 */
position: absolute;
/*子盒子相对于父盒子的宽和高移动50%（即移动宽和高为父盒子的50%） */
top: 50%;
left: 50%;
/* 再回退到自身盒子宽和高的一半（由于坐标原点在左上角，向右移动为正值，向左移动为负值，所以这里为负值） */
margin-left: -150px;
margin-top: -75px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
方法2：css3でtranslateを使用すると、子ボックスの幅と高さを計算する必要はありません。移動する幅と高さは、それ自体の幅と高さを基準にして計算されるためです。
方法3：子ボックスの上部、右側、下部、左側を0に設定し、マージンを自動に設定します
2.フレックスレイアウト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 800px;
height: 500px;
border: 1px solid red;
/* flex布局默认主轴是 x 轴 row */
display: flex;
/* 设置子元素在主轴上居中对齐 */
justify-content: center;
/* 设置子元素在侧轴上居中对齐 */
align-items: center;
}
.box2 {
width: 300px;
height: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>