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

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

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

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