BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSを使ってボックスの水平・垂直方向の中央寄せを実現（全8種）

2022-02-02 04:55:26

オリジナルのコードです。

center.html : 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center</title>
    <link rel="stylesheet" href="center.css">
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

center.css : 

body {
    background-color: #6ed0ff;
}

.father {
    background-color: #be33ec;
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(0, 0, 0);
    margin: 100px auto;
    width: 300px;
    height: 300px;
}

.son {
    background-color: #fcff00;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(0, 0, 0);
    width: 100px;
    height: 100px;
}

オリジナル効果。

親ボックスを基準にして子ボックスを垂直方向にセンタリングします。

1. 

grid
.father {
    display: grid;
}

.son {
    align-self: center;
    justify-self: center;
}



absolute

2. margin .father { position: relative; } .son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } + ネガティブ 

absolute


transform
.father {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

3. absolute + 

margin: auto
.father {
    position: relative;
}

.son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}



flex
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

4. margin + 

transfrom
.father {
    overflow: hidden;
}

.son {
    margin: 50% auto;
    transform: translateY(-50%);
}



table-cell
.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.son {
    display: inline-block;
}

5. 

inline-block


vertical-align
.father {
    text-align: center;
    line-height: 300px;
}

.son {
    display: inline-block;
    vertical-align: middle;
}

6. margin + 

transfrom



.father {
    overflow: hidden;
}

.son {
    margin: 50% auto;
    transform: translateY(-50%);
}

7. 

table-cell



.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.son {
    display: inline-block;
}

8. inline-block + 

vertical-align



.father {
    text-align: center;
    line-height: 300px;
}

.son {
    display: inline-block;
    vertical-align: middle;
}

ボックス（8種類）の水平方向と垂直方向のセンタリングを実現するためにCSSの使用に関するこの記事は、より関連するCSSボックス水平方向と垂直方向のセンタリングコンテンツは、以前の記事のスクリプトのホームを検索するか、次の関連記事を閲覧し続けてください、私はあなたがよりスクリプトのホームをサポートすることを願っていますに導入されています！この記事では、ボックスの水平方向のセンタリングと垂直方向のセンタリングを実現するために、この記事のCSSの使用は、以前の記事で、私はあなたがこの記事を閲覧し続けて、この記事を参照してくださいです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します