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%);
}
上一篇: css实现居中总结
下一篇: 整个div居中,不是div中的内容居中