且把包含图片的div中的display属性设置成table-cell，最后给有图片的div设置成vertical-align:
middle属性，代码如下：
.tablebox{
width: 300px
height: 250px
background: #fff
display: table
}
#xxx{
display: table-cell
vertical-align: middle
}
#xxx img{
width: 100px
}
可以多看看黑马程序员的课程，多学学这些基础知识。
在css中，我们可以使用flex去实现垂直居中，但是flex并不是一个很好的方法，现在很多浏览器并不支持flex，例如IE8,9。首先我们要先给图片添加一个div，并且定义为宽度为100px，高度也是100px，并且给它定义一些基本的属性，其中我们把div中的display元素设置成flex，然后把另外一条添加align-items:center属性。
css代码：
body{background:#999}
.flexbox{width:300pxheight:250pxbackground:#fffdisplay:flexalign-items:center}
.flexboximg{width:100pxheight:100pxalign-items:center}
如果情况容许的话，可以用以下方法，兼容性更好：
body{background:#ccc}
.posdiv{width:300pxheight:250pxbackground:#fffposition:relativemargin:0auto}
.posdivimg{width:100pxposition:absolutetop:50%margin-top:-50px}
一、css图片水平居中。
1、利用margin: 0 auto实现图片居中，就是在图片上加上css样式margin: 0 auto 如下：
2、设置imgBox的样式如下：
3、此时的效果如下：（图片在容器内，水平居中）
二、css图片垂直居中。
1、css代码如下，使用flex布局实现。
2、页面代码HTML如下：
3、此时的效果如下：（垂直居中）
三、 css图片水平垂直居中。
1、利用flex布局实现css水平垂直居中，设计css代码如下：
2、Html代码如下：
3、此时的效果如下：（水平垂直居中）
扩展资料：
在容器上使用display: flex来告诉浏览器，这是一个flex布局的开始。然后给所有的item添加一个flex: 1的属性，来表明元素都是flex布局中的内容。
关于flex，最重要的就是要记住他有两条轴线（主轴、交叉轴），绝大部分属性都是依赖于轴线的方向。如下图所示：
这样，容器内的元素会沿着主轴来平分所有的区域，就这样已经实现了一个多列等宽布局。
