让图片在div里居中（三种方法）

Posted 2022-03-23 我想月薪过万

问题

当我们将一张 img 放在 一个 div 里的时候，具有超高审美的我们，硬是要将 img 居中于 div。所以，产什么以下解决方法。

解决方法

布局文件代码

<div class="content">
     <img src="img_p1_title.png">
</div>

第一种方法：

.content
  width:340px;
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;  

第二种方法：

.content
  width:340px;
  height:40px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;

第三种方法

.content
   width:340px;
   height:40px;
   position: relative;

.content img
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

注意

如果你的布局没居中，请检查：

外层 div 给了 宽高吗？如果你用的第三种方法，是否符合“子绝父相”原理？

以上两种都没问题，那您就按F12检查吧！！！