CSS 图片垂直居中的多种实现方法_ccs图片垂直居中-优快云博客

本文链接：https://blog.youkuaiyun.com/Tessa_zzl/article/details/103087458

这篇博客主要探讨了CSS中实现图片垂直居中的三种方法：使用flex布局，display: table属性，以及通过相对定位。文章指出，text-align和margin方法在特定条件下生效，并提醒读者，相对定位的方法适用于高度固定的图片，对于宽度固定、高度自适应的情况可能不适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片居中效果
图片水平居中的方法有很多, 比如flex, margin, text-align, position, 这里不再做具体说明, 主要讲解, 图片的垂直居中.
( 注意: text-align: center在图片为内联块inline-block时生效, margin:auto在图片为块block时生效 )

flex实现方法

<div class="img-box">
	<img src="images/s.png" />
</div>

.img-box{
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
}
.img-box img{
  max-width: 100%;
  max-width: 100%;
  align-items: center;
  margin: auto;
}

display: table实现

<div class="tablebox">
  <div id="imgbox">
    <img src="1.jpg" alt="">
  </div>
</div>

.tablebox{
  width: 300px;
  height: 300px; 
  display: table;
}
#imgbox{
  display: table-cell;
  vertical-align: middle;
}
#imgbox img{
  width: 100px;
}

相对定位实现

注意: 这种方法只适用于图片高度固定的, 如果固定宽度, 高度自适应的不太适合. 也可以用同样的方法实现水平居中. margin值为图片尺寸的一半的负值( margin-top对应height, margin-let对应width )

<div class="img-box">
	<img src="images/s.png" />
</div>

.img-box{
  position: relative;
  width: 500px;
  height: 500px; 
}
.img-box img{
  position: absolute;
  top: 50%;
  height: 200px;
  margin-top: -100px;
}