源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 4411|回复: 0

[CSS/Html] 实现div里的img图片水平垂直居中

[复制链接]

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
发表于 2023-9-27 12:17:50 | 显示全部楼层 |阅读模式

body的结构如下:
  1. <body>
  2.         <div>
  3.                 <img src="1.jpg" alt="haha">
  4.         </div>
  5. </body>
复制代码

方法一:

将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。
  1. <style type="text/css">
  2.         *{margin: 0;padding: 0;}
  3.     div{
  4.                 width:150px;
  5.                 height: 100px;
  6.                 display: table-cell;
  7.                 vertical-align: middle;
  8.                 text-align: center;
  9.                 border:1px solid #000;
  10.         }
  11.         img {
  12.         width: 50px;
  13.                   height: 50px;
  14.         }
  15. </style>
复制代码

方法二:

通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

方法三:可以用在不清楚图片图片或元素的真实宽高情况下

还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);
  1. <style type="text/css">
  2.     *{margin: 0;padding:0;}
  3.     div{
  4.         width:150px;
  5.         height: 100px;
  6.         position: relative;
  7.         border:1px solid #000;
  8.     }
  9.     img {
  10.         width: 50px;
  11.         height: 50px;
  12.         position: absolute;
  13.         top: 50%;
  14.         left: 50%;
  15.         transform: translate(-50%,-50%);
  16.     }
  17. </style>
复制代码

方法四,直接看代码:
  1. <style type="text/css">
  2.     *{margin: 0;padding:0;}
  3.     div{
  4.         width:150px;
  5.         height: 100px;
  6.         position: relative;
  7.         border:1px solid #000;
  8.     }
  9.     img {
  10.         width: 50px;
  11.         height: 50px;
  12.         position: absolute;
  13.         top: 0;
  14.         left: 0;
  15.         right: 0;
  16.         bottom: 0;
  17.         margin: auto;
  18.     }
  19. </style>
复制代码

方法五:弹性布局flex
  1. <style type="text/css">
  2.     *{margin: 0;padding:0;}
  3.     div{
  4.         width:150px;
  5.         height: 100px;
  6.         border:1px solid #000;
  7.         display: flex;
  8.         justify-content: center;
  9.         align-items: center;
  10.     }
  11.     img {
  12.         width: 50px;
  13.         height: 50px;
  14.     }
  15. </style>
复制代码

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-10-16 15:33 , Processed in 0.182210 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明