方法 1:
flex レイアウト: メイン軸を垂直方向に中央揃え + サイド軸を垂直方向に中央揃え
<スタイル>
* {
パディング: 0;
マージン: 0;
ボックスサイズ: ボーダーボックス;
}
。大きな箱 {
幅: 300px;
高さ: 300px;
背景色: プラム;
マージン: 100px 自動 0;
表示: フレックス;
正当化コンテンツ: センター;
整列項目: センター;
}
。ちいさな箱 {
幅: 200px;
高さ: 200px;
背景色: 黄緑;
}
</style>
<本体>
<div class="bigBox">
<div class="smallBox"></div>
</div>
</body>
方法 2:
親: 相対位置
子レベル: 絶対配置、上下左右 0 + margin:auto
<スタイル>
* {
パディング: 0;
マージン: 0;
ボックスサイズ: ボーダーボックス;
}
。大きな箱 {
幅: 300px;
高さ: 300px;
背景色: プラム;
マージン: 100px 自動 0;
位置: 相対;
}
。ちいさな箱 {
幅: 200px;
高さ: 200px;
背景色: 黄緑;
位置: 絶対;
マージン: 車;
上: 0;
下: 0;
右: 0;
左: 0;
}
</style>
方法3:
子レベル: 上と左の余白 = (親ボックスの幅/高さ - ボックスの幅/高さ) の 50% (計算が必要)
<スタイル>
* {
パディング: 0;
マージン: 0;
ボックスサイズ: ボーダーボックス;
}
。大きな箱 {
幅: 300px;
高さ: 300px;
背景色: プラム;
マージン: 100px 自動 0;
オーバーフロー: 非表示;
/* パディングトップ: 50px; */
}
。ちいさな箱 {
幅: 200px;
高さ: 200px;
背景色: 黄緑;
マージントップ: 50px;
左マージン: 50px;
}
</style>
方法 4:
親: 相対位置
子レベル: 親ボックスの左上から絶対位置 + 50%、次に独自の幅と高さの 50% 後ろに移動 (計算が必要)
<スタイル>
* {
パディング: 0;
マージン: 0;
ボックスサイズ: ボーダーボックス;
}
。大きな箱 {
幅: 300px;
高さ: 300px;
背景色: プラム;
マージン: 100px 自動 0;
位置: 相対;
}
。ちいさな箱 {
幅: 200px;
高さ: 200px;
背景色: 黄緑;
位置: 絶対;
上: 50%;
左: 50%;
マージントップ: -100px;
マージン左: -100px;
}
</style>
方法5:
親: 相対位置
子レベル: 親ボックスの左上から絶対位置 + 50%、x および y 軸上で自身の 50% を移動
（計算する必要はありません。変位を直接使用してください）
<スタイル>
* {
パディング: 0;
マージン: 0;
ボックスサイズ: ボーダーボックス;
}
。大きな箱 {
幅: 300px;
高さ: 300px;
背景色: プラム;
マージン: 100px 自動 0;
位置: 相対;
}
。ちいさな箱 {
幅: 200px;
高さ: 200px;
背景色: 黄緑;
位置: 絶対;
上: 50%;
左: 50%;
変換: 翻訳(-50%, -50%);
}
</style>
方法 6:
親: 表示: テーブル セル + ベースラインの配置 + テキストの中央揃え
子: ラップされたインライン ブロック
注: display:table-cell 属性は td タグに非常に似ており、margin 値には意味がありません。
<スタイル>
* {
パディング: 0;
マージン: 0;
ボックスサイズ: ボーダーボックス;
}
。大きな箱 {
幅: 300px;
高さ: 300px;
背景色: プラム;
/* マージン: 100px auto 0; */
表示: テーブルセル;
垂直整列: 中央;
テキスト整列: 中央;
}
。ちいさな箱 {
幅: 200px;
高さ: 200px;
背景色: 黄緑;
表示: インラインブロック;
}
</style>