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;//使其垂直居中 	}

效果图

方法二

利用display: table-cell;vertical-align: middle;text-align: center;三种属性实现

display:table-cell:会作为一个表格单元格显示（类似 <td> 和 <th>)

text-align: center：设置水平对其方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。

div{         width:200px;         height: 200px;         margin:300px auto;         display: table-cell;//作为一个表格单元格显示         vertical-align: middle;//设置垂直对齐方式         text-align: center;//设置水平对其方式         border:1px solid #ccc;     }      img {         width:80px;         height:50px;     }

效果图

方法三

在本方法中要注意margin-top、margin-left值的设定，要设置为元素高度和宽度的一半，而且都要取负值

div{ 	width:200px; 	height:200px; 	border: 1px solid #ccc; 	position: relative; } img{ 	position: absolute; 	width:80px; 	height: 50px; 	top:50%; 	left:50%; 	margin-top: -40px;//向上40px 	margin-left: -25px;//向左25px  }

效果图

总结：实现利用css将图片在div中垂直居中问题的方法有很多中，以上就是我总结出来的三种方法，其余的欢迎大家补充，希望这篇文章能够对大家学习页面布局有所帮助。

以上就是css如何实现图片在div中垂直居中的详细内容，更多内容请关注技术你好其它相关文章！