css水平垂直中央

下の図の緑の枠を水平に垂直に中央に置くには、どのように実現したのか、誰もが自分の習慣的な使い方を持っているかもしれません.以下は私がまとめたいくつかの方法です.くだらないことを言わないで、直接料理を出します.

1.絶対位置の利用

方法:topとleftを50%オフセットし、marginオフセットで返します.適合:固定サイズの要素.応答を行うには、実際の必要に応じてjsの操作が必要になる可能性があります.

div1{
    background:gold;
    width:500px;
    height:500px;
    position:relative;
}
div2{
    width:400px;
    height:400px;
    background:greenyellow;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-200px;
    margin-left:-200px;
}

    

    

2..絶対位置決めの利用

方法:オフセットを0に設定し、margin自動プロパティで中央に配置します.適合::固定されたサイズの要素で、幅の高さを設定しないと、親要素全体が満たされます.

   #div1{
        background:gold;
        width:500px;
        height:500px;
        position:relative;
    }
    #div2{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        width:400px;
        height:400px;
        margin:auto;
        background:greenyellow;
    }

    

    

3.擬似要素の利用

方法:div 2と::afterはinline-blockに移行し、親要素のテキストを中心にして要素の水平方向の中心に達し、偽要素の幅を100%に設定し、div 2と::afterは垂直に垂直にmiddleに整列します.適合:幅が不定の要素で、要素は内容によってサイズが変わりますが、どのように変更しても、常に垂直と水平を維持することができます.

#div1{
            background:gold;
            width:500px;
            height:500px;
            text-align:center;
        }
        #div2{
            background:greenyellow;
            height:400px;
            width:400px;
            display:inline-block;
            vertical-align:middle;
        }
        #div1::after{
            content:'';
            height:100%;
            display:inline-block;
            background:green;
            vertical-align:middle;
       }

    

    

4.擬似要素の利用

この方法は方法3とあまり差がありませんが、要素の属性が違います.

#div1{
            background:gold;
            width:500px;
            height:500px;
            text-align:center;
        }
        #div2{
            background:greenyellow;
            height:400px;
            width:400px;
            display:inline-block;
            vertical-align:middle;
        }
        #div1::after{
            content:'';
            height:50%;
            display:inline-block;
            background:green;
        }

    

    

5.エレメントをinline-blockにする

方法:親要素にline-heightとcenterを設定し、垂直位置合わせを中央に設定すると適切です.親要素は行の高さを設定します.

#div1{
        background:gold;
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
    }
    #div2{
        width:400px;
        height:400px;
        vertical-align:middle;
        display:inline-block;
        background:greenyellow;
    }

    

    

実際の状況に応じて異なる方法を使用することができます.このブログは本人のブログに先発し、cssは水平垂直に中央に位置している.