实现div里的img图片水平垂直居中

╰半橙微兮° 2021-06-26 16:06 422阅读 0赞

`body`结构

<body>
        <div>
            [外链图片转存失败(img-XveH5Msl-1562164037436)(https://mp.csdn.net/mdeditor/1.jpg)]
        </div>
    </body>

## 方法一： ##

将`display`设置成`table-cell`，然后水平居中设置`text-align`为`center`，垂直居中设置`vertical-align`为`middle`。

结果如下图所示：  
![这里写图片描述][20190630183418352.png]

## 方法二： ##

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

结果如下图所示：  
![这里写图片描述][20190630183606942.png]  
很久以前的文章了，看到浏览量这么高，我再补充几种实现方法

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

还是通过`position`定位来实现。将`div`设置成相对定位`relative`，将`img`设置成绝对定位`absolute`，`left:50%，top:50%`，此时图片的左上角位于`div`的中心，要是图片的中心位于`div`的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用`transform: translate(-50%,-50%);`

## 方法四： ##

## 方法五：弹性布局`flex` ##

效果都一样，希望能帮到大家！

[20190630183418352.png]: /images/20210626/68a287d33d114486a9a14dee9d030840.png
[20190630183606942.png]: /images/20210626/eba05cb13b3341329624a0576ecdcc75.png