方法一：

效果

1.HTML代码

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就变成了行内块级元素。

多张图片居中

方法二：

1.HTML代码

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.备注

1. 始终"子绝父相"的定位方法，父元素div的display不会改变，不会影响父元素的位置