首页 / CSS / css如何实现图片在div中垂直居中
css如何实现图片在div中垂直居中
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css如何实现图片在div中垂直居中,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2038字,纯文字阅读大概需要3分钟。
内容图文
![css如何实现图片在div中垂直居中](/upload/InfoBanner/zyjiaocheng/411/c87afb723c454245b1594af4e595766c.jpg)
平时我们在做页面时经常会遇到让我们把一张图片显示在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>)
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; }
效果图
方法三
利用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中垂直居中的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的css如何实现图片在div中垂直居中全部内容,希望文章能够帮你解决css如何实现图片在div中垂直居中所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。