css水平垂直居中

blankyao 發(fā)布于2019-08-01 16:54 / 2576人閱讀

摘要：要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。把元素設(shè)為方法在父元素中設(shè)置和然后設(shè)置垂直對(duì)齊方式為居中就可以適合父元素高固定的，畢竟要設(shè)置行高。本篇博客首發(fā)于本人博客水平垂直居中

要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。下面是我總結(jié)的幾種方法廢話(huà)不多說(shuō)，直接上菜。

1.利用絕對(duì)定位

方法：把top和 left 偏移 50%，在用margin 偏移回去。
適合：已經(jīng)固定大小的元素。做響應(yīng)的話(huà)可能根據(jù)實(shí)際需要還需要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..利用絕對(duì)定位

方法：把偏移都設(shè)為0，在用margin 自動(dòng)屬性居中。
適合：:已經(jīng)固定大小的元素，不設(shè)置寬高，它會(huì)撐滿(mǎn)整個(gè)父元素。

   #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.利用偽元素

方法：div2和::after都轉(zhuǎn)為inline-block，在父元素中設(shè)文本居中來(lái)達(dá)到元素水平居中，把偽元素寬度設(shè)為100%，然后div2和::after都垂直垂直對(duì)齊方式為middle。
適合：寬高不定的元素，元素會(huì)隨內(nèi)容改變大小，但不管怎么改變，就是可以始終維持垂直和水平置中。

#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.利用偽元素

這個(gè)方法和方法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.把元素設(shè)為inline-block

方法：在父元素中設(shè)置line-height和center然后設(shè)置垂直對(duì)齊方式為居中就可以
適合：父元素高固定的，畢竟要設(shè)置行高。

#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;
    }

你可以根據(jù)實(shí)際情況使用不同方法。
本篇博客首發(fā)于本人博客,css水平垂直居中