方法一：
效果
1.HTML代码
<div>
<img src="bj.png" alt="图片">
</div>
2.CSS代码
div{
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #666;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 200px;
}
3.备注
1.如果将给div设置display:table-cell，那么div就变成了行内块级元素。
2.如果div中有多重图片，那么会呈现这个效果。
多张图片居中
方法二：
1.HTML代码
<div>
<img src="bj.png" alt="图片">
</div>
2.CSS代码
div{
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #666;
position: relative;
}
img{
width: 200px;
height: 112px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -56px;
margin-left: -100px;
3.备注
- 始终"子绝父相"的定位方法，父元素div的display不会改变，不会影响父元素的位置
