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

标题: 实现div里的img图片水平垂直居中 [打印本页]
作者: 洪七公    时间: 2023-9-27 12:17
标题: 实现div里的img图片水平垂直居中

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>
复制代码





欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3