在 CSS 中,让图片上下居中是一个常见的需求。下面介绍几种实现方法。/* 方法一:使用 CSS3 的 transform 属性 */ .centered { position: relative;
在 CSS 中,让图片上下居中是一个常见的需求。下面介绍几种实现方法。
/* 方法一:使用 CSS3 的 transform 属性 */ .centered { position: relative; top: 50%; transform: translateY(-50%); }
这种方法需要将图片设置为 position: absolute;
或者 position: fixed;
并将其父元素设置为 position: relative;
。然后通过设置 top: 50%;
将图片的顶部调整到父元素的中间位置,再使用 transform: translateY(-50%);
将图片的中心位置上移一半的高度,即可让图片上下居中。
/* 方法二:使用 flexbox */ .container { display: flex; align-items: center; justify-content: center; } img { max-width: 100%; max-height: 100%; }
这种方法需要将图片的父元素设置为 display: flex;
并设置 align-items: center;
和 justify-content: center;
,即可让图片在父元素中上下左右居中。同时需要将图片的宽度和高度设置为 max-width: 100%;
和 max-height: 100%;
,保证图片大小不超过父元素的大小。
/* 方法三:使用 table-cell */ .container { display: table; height: 100%; width: 100%; } img { display: table-cell; vertical-align: middle; }
这种方法需要将图片的父元素设置为 display: table;
、height: 100%;
和 width: 100%;
。然后将图片的 display
属性设置为 table-cell;
并使用 vertical-align: middle;
即可让图片在父元素中上下居中。
粉丝
0
关注
0
收藏
0