css實(shí)現(xiàn)垂直居中的方法有哪些

小編給大家分享一下css實(shí)現(xiàn)垂直居中的方法有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),寧國(guó)企業(yè)網(wǎng)站建設(shè),寧國(guó)品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧國(guó)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,寧國(guó)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

html結(jié)構(gòu)

<p class="box box2">
    <span class="content content2">垂直居中</span></p>

默認(rèn)css樣式結(jié)構(gòu)

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell    

該方法兼容IE8+，火狐，谷歌，并且content是否有寬高都可以。  注：IE8+ 包含 IE8

.box2{
    display:table-cell;      //此元素會(huì)作為一個(gè)表格單元格顯示（類(lèi)似 <td> 和 <th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. display: flex;      

該方法不兼容IE8，IE9，content是否有寬高都可以。兼容火狐、谷歌

參考flex布局：https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. 絕對(duì)定位和負(fù)邊距      

該方法兼容IE8+，火狐，谷歌，content必須有寬高。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. 絕對(duì)定位和0      

該方法兼容IE8+，火狐，谷歌，content必須有寬高。

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 絕對(duì)定位和transform    

該方法不兼容IE8，兼容IE9+，火狐，谷歌，content是否有寬高都可以。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6.display:flex 和 margin:auto      

content有寬高：不兼容IE8，IE9，content沒(méi)有寬高：不兼容IE。有無(wú)寬高都兼容火狐、谷歌。

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

看完了這篇文章，相信你對(duì)css實(shí)現(xiàn)垂直居中的方法有哪些有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

標(biāo)題名稱(chēng)：css實(shí)現(xiàn)垂直居中的方法有哪些
瀏覽地址：http://bm7419.com/article28/jddhcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、App開(kāi)發(fā)、品牌網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)