img垂直水平居中与div

方法一：

效果

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

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