css中有幾種方法可以實(shí)現(xiàn)水平垂直居中？針對(duì)這個(gè)問(wèn)題，今天小編總結(jié)這篇有關(guān)水平垂直居中的文章，可供感興趣的小伙伴們參考借鑒，希望對(duì)大家有所幫助。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為高郵企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，高郵網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

水平居中
（1）使用inline-block+text-align

demo

    .child {
             display:inline-block;
        }
        .parent {
             text-align:center
        }

    原理：先將子框由塊級(jí)元素改變?yōu)樾袃?nèi)塊元素，再通過(guò)設(shè)置行內(nèi)塊元素居中以達(dá)到水平居中。
    優(yōu)點(diǎn)：兼容性好，甚至可以兼容ie6、ie7

    (2)使用table+margin
        .child {
            display:table
            margin:0 auto;
        }
原理：先將子框設(shè)置為塊級(jí)表格來(lái)顯示，再設(shè)置子框居中以達(dá)到水平居中。
缺點(diǎn)：不支持ie6、ie7,將div換成table

（3）使用absolute+transform
    .child {
                 position:absolute;
                 left:50%;
                 transform:translateX(-50%)
        }
        .parent {
                  position:relative
        }

缺點(diǎn)：transform屬于css3內(nèi)容，兼容性存在一定問(wèn)題，高版本瀏覽器需要添加一些前綴

(4)使用flex+margin
        .child {
          margin:0 auto
        }
        .parent {
                display:flex
        }
缺點(diǎn)：低版本瀏覽器(ie6 ie7 ie8)不支持

(5)使用flex+justify-content
    .parent {
                display:flex;
                justify-content:center
        }
    缺點(diǎn)：低版本瀏覽器(ie6 ie7 ie8)不支持

    垂直居中
    (1)使用table-cell+vertical-align

        .parent {
                display:table-cell；
                vertical-align:middle
        }

    (2)使用absolute+transform
        .child {
          position:absolute;
            top:50%;
            transform:translateY(-50%)
        }
        .parent {
                position:relative
        }
缺點(diǎn)：transform屬于css3內(nèi)容，兼容性存在一定問(wèn)題，高版本瀏覽器需要添加一些前綴

    (3)使用flex+align-items
        .parent {
            display:flex;
            align-items:center;
        }

    水平垂直居中
    (1)使用absolute+transform(未知高度)
    .parent {
            position:relative;
        }
    .child {
            position:absolute;
            left:-50%;
            top:-50%
            transform:translate(-50%,-50%)
        }
    (1.1)使用absolute+transform(已知高度)
    .parent {
            position:relative;
        }
    .child {
            position:absolute;
            width:100px;
            height:100px;
            left:-50%;
            top:-50%
          margin: -50px 0 0 -50px;
        }

        (2)使用inline-block+text-align+table-cell+vertical-align
        .parent {
            text-align:center;
            display:table-cell;
            vertical-align:middle;
        }
        .child {
                display:inline-block;
        }
        優(yōu)點(diǎn)：兼容性較好

        (3)使用flex+justify-content+align-items
        .parent {
            display:flex;
            justify-content:center;
            align-items:center;
        }
        缺點(diǎn)：兼容性存在一定問(wèn)題

關(guān)于css中實(shí)現(xiàn)水平垂直居中的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。