当前位置:  首页  >  前端开发  >  CSS+DIV

css如何实现图片在div中垂直居中

​实现图片垂直居中的方法有:设置position和margin的值,或者是设置display,vertical-align和text-align的值
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助

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

HTML代码

方法一

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

效果图

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;
    }

效果图

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中垂直居中的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有