css图片居中对齐代码怎么写

可以使用以下的CSS代码实现图片水平和垂直居中对齐:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  max-width: 100%;
  max-height: 100%;
}

其中,我们给父元素 `.container` 应用了 Flex 布局,并使其水平和垂直方向上都居中对齐。子元素(即图片)则使用了 `max-width: 100%` 和 `max-height: 100%` 属性,这样可以保证图片在任何情况下都不会超出父元素的最大宽度和高度。

除此之外,还可以使用传统的绝对定位的方法来实现图片的居中对齐。例如:

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

在这个例子中,我们给父元素 `.parent` 设置了一个 `position: relative` 属性,然后将子元素 `.child` 使用绝对定位相对于父元素进行定位。接着,通过 `top: 50%; left: 50%` 将图片的左上角放置在父元素的中心位置,最后使用 `transform` 属性进行微调使图片完全居中对齐。

版权声明:
作者:Joker 链接:https://hooper.eu.org/archives/157074
文章版权归作者所有,转载请注明出处。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>