欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

div中图片居中的方法

程序员文章站 2022-04-24 22:17:56
...
<div class="father">
      <img src="./img/ewm_lk.jpg" alt="" class="son" />
</div>

方法一:弹性布局flex

.father {
        width: 400px;
        height: 400px;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
 }
 .son {
        width: 200px;
        height: 200px;
}

方法二:transform属性和position定位相结合

.father {
        width: 400px;
        height: 400px;
        background: pink;
        position: relative;
}
.son {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
 }