圖片是一個塊級元素，可以用塊級元素的方法居中，居中的方法有很多，我隨便列舉幾個一lt！DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot lttitle居中l(wèi)ttitle lthead ltstyle type=quottextcssquot one。

1準(zhǔn)備html文件和圖片，如下圖所示 2在html文件的body標(biāo)簽內(nèi)加屬性margin和textalign，如下圖所示 3右鍵單擊html文件選擇瀏覽器運(yùn)行，如下圖所示 4接下來就看到圖片置頂居中了，如下圖所示。

所以通常圖片高，文字低，不能水平居中對齊2再次編輯ahtml，加入以下css代碼hlong *displayinlineblockverticalalignmiddle3再次使用瀏覽器訪問ahtml頁面即可成功讓div里邊的圖片和文字同時上下居中。

先看下我們的html代碼，在一個div里放入一個img圖片標(biāo)簽再看下我們div的樣式，主要地方是我們設(shè)置了div的寬度，為400px，如圖所示的代碼現(xiàn)在看下頁面，可以看到，現(xiàn)在的圖片是靠左顯示的，并沒居中要讓img標(biāo)簽的圖片。

二css圖片垂直居中1css代碼如下，使用flex布局實(shí)現(xiàn)2頁面代碼HTML如下3此時的效果如下垂直居中三 css圖片水平垂直居中1利用flex布局實(shí)現(xiàn)css水平垂直居中，設(shè)計css代碼如下2Html代碼如下3此時。

01打開記事本或其他代碼編輯器，創(chuàng)建一個新的HTML文件，如下圖所示 02用瀏覽器打開這個HTML文件，可以看到下圖所示的效果這幅畫在整頁的左邊03圖片居中可以通過HTML中的align屬性來控制在圖片的div中添加align=quotcenterquot。

ltimg src=quot2gifquot 這是圖片的代碼 你可以這樣寫他們的寬高ltimg src=quot2gifquot width=quot300quot height=quot300quot alt=quot我是圖片哦！quot還有加上alt注釋了！讓圖片局中是讓圖片在什么地方局。

1實(shí)例HTML+CSS完整代碼如下2水平居中實(shí)例截圖 無論文字居中圖片居中等內(nèi)容居中，都可以使用以上兩種方法實(shí)現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁多時候，只需要修改CSS文件里對應(yīng)一處選擇器樣式即可修改內(nèi)容居中居左居右。

1新建一個testhtml文件2在文件中，創(chuàng)建一個div模塊，在div內(nèi)，使用img標(biāo)簽創(chuàng)建一張圖片3在css標(biāo)簽內(nèi)，設(shè)置div的高度寬度位置屬性為絕對定位，同時使用left和top設(shè)置居中顯示，從而實(shí)現(xiàn)圖片在網(wǎng)頁中居中顯示。