CSS を使用してボックスを水平方向と垂直方向に中央揃えする方法 (8 つの方法)

元のコード:

center.html :

<!DOCTYPE html>
<html lang="Zh">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>センター</title>
    <link rel="スタイルシート" href="center.css">
</head>

<本文>
    <div class="父">
        <div class="son"></div>
    </div>
</本文>

</html>

center.css : : 中央のcss:

体 {
    背景色: #6ed0ff;
}

。父親 {
    背景色: #be33ec;
    境界線の半径: 20px;
    ボックスシャドウ: 0 0 15px rgb(0, 0, 0);
    マージン: 100px 自動;
    幅: 300ピクセル;
    高さ: 300px;
}

.息子{
    背景色: #fcff00;
    境界線の半径: 20px;
    ボックスシャドウ: 0 0 10px rgb(0, 0, 0);
    幅: 100ピクセル;
    高さ: 100px;
}

オリジナル効果:

ここに画像の説明を挿入

親ボックスに対して子ボックスの垂直方向の中央揃え効果を実現するには、次のようにします。

ここに画像の説明を挿入

1. grid

。父親 {
    表示: グリッド;
}

.息子{
    位置合わせ: 中央;
    自己正当化: 中央揃え;
}

2. absolute + 負のmargin

。父親 {
    位置: 相対的;
}

.息子{
    位置: 絶対;
    左: 50%;
    上位: 50%;
    左マージン: -50px;
    上マージン: -50px;
}

3. absolute + transform

。父親 {
    位置: 相対的;
}

.息子{
    位置: 絶対;
    左: 50%;
    上位: 50%;
    変換: translate(-50%, -50%);
}

4. absolute + margin: auto

。父親 {
    位置: 相対的;
}

.息子{
    位置: 絶対;
    左: 0;
    右: 0;
    上: 0;
    下部: 0;
    マージン: 自動;
}

5. flex

。父親 {
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

6. margin + transfrom

。父親 {
    オーバーフロー: 非表示;
}

.息子{
    マージン: 50% 自動;
    変換: translateY(-50%);
}

7. table-cell

。父親 {
    表示: テーブルセル;
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
}

.息子{
    表示: インラインブロック;
}

8. inline-block + vertical-align

。父親 {
    テキスト配置: 中央;
    行の高さ: 300px;
}

.息子{
    表示: インラインブロック;
    垂直位置合わせ: 中央;
}

CSS を使用してボックスを水平方向と垂直方向に中央揃えする 8 つの方法についての記事はこれで終わりです。CSS を使用してボックスを水平方向と垂直方向に中央揃えする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

>>: VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィックチュートリアル)