2打开DW，选择新建HTML文件3首先先建立三个盒子，大盒子包含两个小盒子，如图4然后再对细节进行完善，左侧为文字区，直接在所建立的div中添加文字即可，当然也可以添加一些文字标签，右侧添加的无序列表，方便图片。

4然后我们需要在body部分新建一个div标签，并在其中插入一张img图片并给div添加简单的css样式5然后我们在浏览器中查看效果，可以发现图片是默认左对齐的，并没有在div的正中央显示6此时为图片添加居中属性也是没。

2设置imgBox的样式如下3此时的效果如下图片在容器内，水平居中二css图片垂直居中1css代码如下，使用flex布局实现2页面代码HTML如下3此时的效果如下垂直居中三 css图片水平垂直居中1。

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法所谓的图片水平垂直居中就是把图片放在一个容器元素中容器大于图片尺寸或是指定了大小的容器，并且图片位居此容器正中间中间是指元素容器的正中间，而图片不是以。