css如何实现图片在div中垂直居中-木庄网络博客

本文摘自PHP中文网，作者清浅，侵删。

本文章主要介绍css如何实现图片在div中垂直居中问题，具有一定参考价值，希望能给大家提供帮助

平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做，今天我们来分享几种常用的css实现图片在div中垂直居中的代码

HTML代码

<div>
    <img src="images/1.jpg">
</div>

方法一

利用position和margin共同实现

通过给父元素设置绝对定位属性来让子元素相对于div定位

relative是保留原来的位置进行定位并且是相对于自己原来的位置进行定位

absolute 是脱离原来位置定位，是相对于最近的有定位的父级进行定位；如果没有有定位的父级元素，就相对于文档进行定位

注意：要使子元素的上下左右都为0，然后设置margin：auto就会自动垂直居中

代码如下

div{
    width:200px;
    height:200px;
    border: 1px solid #ccc;
    position: relative;//父元素设置绝对定位
}
img{
    position: absolute;//相对定位
    width:80px;
    height:50px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;//使其垂直居中
    }