1、首先先在页面里加载一张图片，代码和效果如下图所示：
成都创新互联-专业网站定制、快速模板网站建设、高性价比桦川网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式桦川网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖桦川地区。费用合理售后完善，十多年实体公司更值得信赖。
2、然后设置给图片起一个class名，方便一会儿的操作。
3、然后给图片设置css样式，因为方便的原因就直接在html页面写css样式了。
4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。
5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到图片已经实现了。
6、最后给大家附上全部的代码：
!DOCTYPE html
html
head
meta charset="utf-8" /
title使用CSS让图片水平垂直居中/title
/head
body
img class="pic" src="img/timg.jpg" alt="" /
/body
style type="text/css"
.pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/style
/html
1、css li的图片样式：liimg src="" class="img"/li
2、样式： .img{width:100px; height:100px; background:#f00;}
dw里怎样设置图片的css样式
1、首先在文件内插入一张图片，点击插入\图像，选择一张图片即可。
2、选中图像，点击css样式窗口的+号，新建一个CSS（相关课程推荐：css视频教程） 样式，打开对话框。选择标签元素，下面就自动变为img，就是说为图像编辑规则。
3、比如要为图片编辑边框，就在弹出的对话框中选择边框，有三个属性可以更改，一个是类型，大小和颜色。可以根据需要选择。
4、在右侧的css面板上就多了个边框属性，代码中多了个图像的css样式代码。图像就自动按照样式进行更改了。
5、如果要对该图像再进行修改，可以点击css样式窗口下的铅笔，在弹出的对话框中修改即可。
这个可以用CSS实现就好了。不必要使用JS
图片放大效果的话，建议用一个额外的 div层放置放大后的图片，这样布局就不会乱了。鼠标放上去就显示这个层。
.img2{
/*这里写你的所有图片都会用到的样式*/
}
.img2:first-child, .img2:last-child{
/*这里写第一个图片和最后一个图片会用到的样式*/
}
.img1:hover .showBigImg{
display:block;
}
对于这个大图的div层的显示，可以稍加js控制，这样就可以所有图片共用一个div层来放置大图。
希望能帮助到你
