可以为盒子添加“text-align: center”样式使图片在盒子中居中。
1、新建html文档，在body标签中添加一个div盒子，然后在这个div盒子中添加一张图片：
2、为div盒子和图片添加一些样式，这时默认情况下图片会向盒子的左上角对齐：
3、为div盒子添加“text-align: center”样式，这时图片会在div盒子中居中对齐：
1、打开HBuilder开发软件并在Web项目中创建一个新的静态页面。
2、将三个div元素插入body元素并将其类设置为AA，BB和CC。
3、预览静态页面，您可以看到页面效果，即中上层和下层。
4、分别设置AA，BB和CC三个类的样式属性，包括宽度，高度和背景颜色。
5、我们再次设置body元素样式属性。
body{
text-align: center
vertical-align: middle
display: box
display: -moz-box
display: -webkit-box
orient: horizontal
-moz-box-orient: horizontal
-webkit-box-orient: horizontal
}
6、分别添加字体的垂直分布。
text-align: center
vertical-align: middle
比较简单的做法就是，将他们放置一个盒子内，你想让文字跟图片居中，那么不一定要让图片当文字的参照物，而是让他们在大盒子内居中，不需要太复杂的框架结构，只需要利用样式的属性即可，并且各个浏览器都会正常显示，代码如下：<div class="box">
<img src="6107.jpg">
这里是居中的文字
</div>
<style>
.box{width:300pxtext-align:centerfont-szie:18px}
.box img {width:100%}
</style>
