CSS で水平方向と垂直方向の中央揃えを実現する 4 つの方法-CSSチュートリアル-php.cn

CSS で水平方向と垂直方向の中央揃えを実現する 4 つの方法

小云云

リリース： 2018-01-25 13:24:52

オリジナル

2564 人が閲覧しました

この記事では主にCSSの水平方向と垂直方向の中央揃えを実装する4つの方法を紹介します。計画では幅と高さも指定しましたが、幅と高さが固定されるという意味ではありません。しかし、幅と高さを与えないと効果が見えないと思いました。このソリューションが幅と高さを固定しないという事実は、このソリューションを使用した後、親要素と子要素の幅と高さが変更された場合でも、水平方向と垂直方向の中央位置が保証されることを意味します。

次の 4 つの解決策はすべて、親要素または子要素の幅と高さが変更された場合でも、水平方向と垂直方向の中央揃えのレイアウトが維持されます。

オプション 1: 配置

html

ログイン後にコピー

css

        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }

ログイン後にコピー

オプション 2: flex

html 変更なし

ログイン後にコピー

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

ログイン後にコピー

オプション 3: テーブルレイアウト

親要素を display:table- に設定する必要があります。 cell、vertical と text-align を使用して、すべてのインラインブロックレベル要素を水平方向と垂直方向に中央揃えにします
子要素の表示を設定します: inline-block

html 変更なし

ログイン後にコピー

css

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }

ログイン後にコピー

オプション 4: グリッドレイアウト (最新のバージョンでサポートされています)ブラウザ)

html は変更されません

ログイン後にコピー

css は変更されません

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

ログイン後にコピー