2打開DW，選擇新建HTML文件3首先先建立三個(gè)盒子，大盒子包含兩個(gè)小盒子，如圖4然后再對細(xì)節(jié)進(jìn)行完善，左側(cè)為文字區(qū)，直接在所建立的div中添加文字即可，當(dāng)然也可以添加一些文字標(biāo)簽，右側(cè)添加的無序列表，方便圖片。

4然后我們需要在body部分新建一個(gè)div標(biāo)簽，并在其中插入一張img圖片并給div添加簡單的css樣式5然后我們在瀏覽器中查看效果，可以發(fā)現(xiàn)圖片是默認(rèn)左對齊的，并沒有在div的正中央顯示6此時(shí)為圖片添加居中屬性也是沒。

2設(shè)置imgBox的樣式如下3此時(shí)的效果如下圖片在容器內(nèi)，水平居中二css圖片垂直居中1css代碼如下，使用flex布局實(shí)現(xiàn)2頁面代碼HTML如下3此時(shí)的效果如下垂直居中三 css圖片水平垂直居中1。

HTML CSS中實(shí)現(xiàn)DIV中的圖片水平垂直居中對齊的方法所謂的圖片水平垂直居中就是把圖片放在一個(gè)容器元素中容器大于圖片尺寸或是指定了大小的容器，并且圖片位居此容器正中間中間是指元素容器的正中間，而圖片不是以。