怎樣使div中的圖片水平垂直居中？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到泗縣網(wǎng)站設(shè)計(jì)與泗縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：成都做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋泗縣地區(qū)。

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

方法一：
將display設(shè)置成table-cell，然后水平居中設(shè)置text-align為center，垂直居中設(shè)置vertical-align為middle。

結(jié)果如下圖所示：

方法二：
通過(guò)position定位來(lái)實(shí)現(xiàn)。將p設(shè)置成相對(duì)定位relative，將img設(shè)置成絕對(duì)定位absolute，left:50%，top:50%，此時(shí)圖片的左上角位于p的中心，要是圖片的中心位于p的中心，就需要將圖片向上移動(dòng)圖片高度的一半，并向左移動(dòng)圖片寬度的一半。

結(jié)果如下圖所示：

方法三：可以用在不清楚圖片圖片或元素的真實(shí)寬高情況下
還是通過(guò)position定位來(lái)實(shí)現(xiàn)。將p設(shè)置成相對(duì)定位relative，將img設(shè)置成絕對(duì)定位absolute，left:50%，top:50%，此時(shí)圖片的左上角位于p的中心，要是圖片的中心位于p的中心，就需要將圖片向上移動(dòng)圖片高度的一半，并向左移動(dòng)圖片寬度的一半，如果不知道元素的寬高，可以用transform: translate(-50%,-50%);

方法四：

方法五：彈性布局flex

關(guān)于怎樣使div中的圖片水平垂直居中問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。