CSS3でボックスを水平方向に中央揃えにする方法

css3 ボックスを水平方向に中央揃えにする方法: 1. margin 属性を使用し、ボックス要素に「margin: 0 auto;」スタイルを追加して水平方向に中央揃えにします。 2. フレックス エラスティック レイアウトを使用して水平方向の中央揃えを実現します。 ; 3. 位置プロパティと変換プロパティを使用して、水平方向の中央揃えを実現します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS でボックスを水平方向に中央揃えにする方法は、非常に一般的な面接の質問です。ボックスの中央揃えは、親要素を基準にして行われます。そのため、ボックスを中央揃えにするときは、親ボックスを中央に配置するためにネストを使用することがよくあります。巣箱付き。

親ボックスと子ボックスが入れ子になっているときに子ボックスを中央に配置する方法:

• 最初の方法: margin: 0 auto、境界線を使用しますが、マージンが影響します 他のボックスの使用は推奨されません;

• 2 番目の方法: 位置、位置指定を使用、子は親と同じでなければなりません、その後左: 50%、マージン-左: 負のボックス 幅の半分、これが最も一般的に使用される方法です。

• #3 番目の方法: フレックス、エラスティック レイアウト、子ボックスを中央に配置しますが、スタイルは # である必要があります。 ##親ボックスに書かれている、display:flex,just-content:center;

• 4番目の方法:位置に基づいて、CSS3のtransformでmargin-leftを置き換えます:translate (-50px );

• 5 番目の方法: 位置に基づいて、子と親のみを保持し、子に margin:auto、left:0、right:0 を追加します。ボックス ;
  補足: 5 番目のメソッドでは、top:0、bottom:0 を追加すると、垂直方向と水平方向の両方の中央揃えを実現できます。

<div id="father">
    <div id="son"></div>
</div>

<style>
    #father{
        width: 400px;
        height: 200px;
        border: 3px solid pink;
    }
    #son{
        width: 100px;
        height: 100px;
        border: 2px solid red;
    }
</style>

#マージンを使用して水平方向の中央揃えを実現します:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 30px auto; /* 让父元素相对于body居中 */
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 0 auto;/* 让子元素相对于father居中 */
}
</style>

位置決めを使用します。子は親と同じでなければなりません。その後、左: 50%、マージン左: 負のボックス幅の半分:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
</style>

Flex、柔軟なレイアウト、子ボックスを中央に配置しますが、スタイルは

親ボックスに記述する必要があります

:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
</style>

位置に基づいて、子と親のみアスペクトは保持され、子ボックスでマージンを追加: auto、left: 0、right: 0:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
</style>

上記のメソッドは、ボックスの水平方向の中央揃えを実現できます。派手な方法なども大歓迎です！

# 5 番目のメソッドが追加されました。top:0、bottom:0 を追加すると、水平方向と垂直方向の両方のセンタリングを実現できます。

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
</style>

(学習ビデオ共有: css ビデオ チュートリアル

)

以上がCSS3でボックスを水平方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。