CSS中让图片上下居中有多种方法,下面将介绍一些常用的方法。//方法一:使用Flexbox布局 .container { display: flex; justify-content: center;
CSS中让图片上下居中有多种方法,下面将介绍一些常用的方法。
//方法一:使用Flexbox布局 .container { display: flex; justify-content: center; align-items: center; } .container img { max-width: 100%; max-height: 100%; } //方法二:使用绝对定位和负margin .container { position: relative; } .container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } //方法三:使用line-height属性 .container { height: 200px; line-height: 200px; text-align: center; } .container img { vertical-align: middle; max-width: 100%; max-height: 100%; }
以上三种方法都可以让图片上下居中,选择哪一种方法主要取决于具体的需求和布局。
粉丝
0
关注
0
收藏
0