实现div内img水平垂直居中

最新推荐文章于 2023-04-08 22:42:06 发布

summer:

最新推荐文章于 2023-04-08 22:42:06 发布

阅读量291

点赞数 1

文章标签： img居中实现div内img水平垂直居中

本文链接：https://blog.csdn.net/qq_44393344/article/details/95166621

版权

实现div内img水平垂直居中

body结构

<body>
    <div class="s-img">
        <img src="pic-a1.png" alt="img1">
    </div>
</body>

方法一：
给div设置display属性为table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

 <style>
    *{padding: 0;margin:0;}
    .s-img{ 
    		width:100px;
            height:100px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    .s-img img{
    			width:50px;
                height:50px;
            }
 </style>

效果：
在这里插入图片描述
方法二：
通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。

  <style>
    *{padding: 0;margin:0;}
    .s-img{ width:100px;
            height:100px;
            border:1px solid red;
            position: relative;
         }
    .s-img 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>
    *{padding: 0;margin:0;}
    .s-img{ width:100px;
            height:100px;
            border:1px solid red;
            position: relative;
        }
    .s-img img{ width:50px;
                height:50px;
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
            }
  </style>

效果同上。

方法四：margin:auto;

<style>
    *{padding: 0;margin:0;}
    .s-img{ width:100px;
            height:100px;
            border:1px solid red;
            position: relative;
        }
    .s-img img{ width:50px;
                height:50px;
                position: absolute;
                top:0;
                left:0;
                bottom: 0;
                right:0;
                margin: auto;
            }
 </style>

效果同上。

方法五：弹性布局flex

<style>
    *{padding: 0;margin:0;}
    .s-img{ width:100px;
            height:100px;
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .s-img img{ width:50px;
                height:50px;
            }
 </style>

summer:

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现div内img水平垂直居中

实现div内img水平垂直居中body结构<body> <div class="s-img"> <img src="pic-a1.png" alt="img1"> </div></body>方法一：给div设置display属性为table-cell，然后水平居中设置text-align为cen...
复制链接

扫一扫