在CSS中,让图片高度居中显示是一件相对简单的事情。通常,我们可以使用以下两种方法:/* 方法一:使用flex布局 */ .container { display: flex; /* 将容器设置为fl
在CSS中,让图片高度居中显示是一件相对简单的事情。通常,我们可以使用以下两种方法:
/* 方法一:使用flex布局 */ .container { display: flex; /* 将容器设置为flex布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .container img { height: 100%; /* 限制图片高度为父元素高度 */ } /* 方法二:使用定位 */ .container { position: relative; /* 将容器设置为相对定位 */ } .container img { position: absolute; /* 将图片设置为绝对定位 */ top: 50%; /* 将图片上边框距离容器顶部的距离设置为50% */ transform: translateY(-50%); /* 将图片向上移动自身高度的一半 */ }
在以上代码中,我们使用了flex布局和定位两种方法来让图片高度居中显示。需要注意的是,这两种方法都是将图片的高度设置为与父元素相等,并在垂直方向上进行居中。其中,flex布局适用于父元素宽度不为100%的情况,而定位适用于父元素宽度为100%的情况。
粉丝
0
关注
0
收藏
0