酷趣谈,这是爱折腾、爱学习、爱生活、爱分享的小港湾,欢迎关注收藏。
五种方式实现div里的img图片水平垂直居中
方法一:
将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
方法二:
通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}
</style>
方法三:
可以用在不清楚图片图片或元素的真实宽高情况下
还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
方法四:
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
方法五:
弹性布局flex
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>
酷趣谈 – 酷折腾 | 酷学习 | 酷分享,欢迎扫描右侧微信公众号关注收藏。
- 本文由 酷趣谈 发布,关注同名微信公众号“酷趣谈”,获取更多免费资源、最新软件、程序源码、教程文档。
- 本文标题:酷趣谈 » html五种方式实现div里的img图片水平垂直居中
- 转载请注明本文链接:https://www.kuqutan.com/1594.html
© 版权声明
免责声明:除特别标明外,本站下载资源均来自网络共享,版权属于原作者,版权争议与本站无关。本站所下载资源仅限用于学习研究,严禁用于从事商业或者非法活动,请于下载后23小时内自行彻底删除,否则,一切后果请用户自负。访问和下载本站内容,说明您已同意上述条款。
THE END
喜欢就支持一下吧
- 最新
- 最热
只看作者