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

发布时间:2020-07-14 14:43:30 作者:Leah
来源:亿速云 阅读:164

今天就跟大家聊聊有关如何在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;//使其垂直居中
	}

效果图

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

方法二

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

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

vertical-align: middle;设置垂直对齐方式,适用于行级元素

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

效果图

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

方法三

利用position,以及margin-top、margin-left实现

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

例如margin-top: -40px意思就是元素距离上边界向上40px,而margin-top: 40px的意思是距离上边界元素向下40px

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中垂直居中有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. css如何实现图片在div标签居中
  2. css中图片在div居中代码的写法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

position margin %d

上一篇:修改input框默认黄色背景

下一篇:二维数组和它的指针

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》