css怎么让图片上下居中显示

如何使用 CSS 让图片上下居中显示

在 CSS 中，可以采用以下方法让图片上下居中显示：

方法一：使用 flexbox

.container {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}img {  height: 100px;}

方法二：使用绝对定位

立即学习“前端免费学习笔记（深入）”；

.container {  position: relative;}img {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

方法三：使用网格布局

.container {  display: grid;  place-items: center;}img {  height: 100px;}

方法四：使用 object-fit 属性

img {  object-fit: contain;}

方法五：使用 padding

.container {  padding: 20px 0;}img {  height: 100px;}

选择方法的建议：

• 如果需要其他元素在图片周围，使用 flexbox 或网格布局。
• 如果图片大小固定，使用绝对定位或 object-fit 属性。
• 如果图片大小不固定，建议使用 flexbox 或网格布局。

标签：css图片居中