css图片水平垂直居中

本文详细介绍了使用CSS实现图片水平垂直居中的五种常见方法:flex布局、table-cell布局、position定位、借用元素居中以及背景图垂直居中。每种方法都有其优缺点和相应的代码示例,适用于不同场景下的兼容性和性能需求。

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

CSS图片水平垂直居中

flex居中

实现代码

/* 父级添加 */
display: flex;
justify-content: center;
align-items: center;

 /* IE10 + */
<div>
  <img src="./images/1.jpg" alt="">
</div>
<div>
  <img src="./images/2.jpg" alt="">
</div>
<div>
  <img src="./images/3.jpg" alt="">
</div>
  • 优点: 使用css3技术,css代码量少,html结构清晰
  • 缺点: 目前来说兼容差 ,只到IE10+
  • DOEM: flex图片垂直居中
table-cell居中

实现代码

/* 父级添加 */
display: table-cell;
vertical-align: middle;

/* IE8 + */
<div>
  <img src="./images/1.jpg" alt="">
</div>
<div>
  <img src="./images/2.jpg" alt="">
</div>
<div>
  <img src="./images/3.jpg" alt="">
</div>
position居中

实现代码

/* 自身添加 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

/* IE9 + */
<div>
  <img src="./images/1.jpg" alt="">
</div>
<div>
  <img src="./images/2.jpg" alt="">
</div>
<div>
  <img src="./images/3.jpg" alt="">
</div>
  • 优点:html结构清晰,没有多余的标签
  • 缺点:兼容性稍差,css代码过多,使用定位属性有点大材小用了
  • DEMO: position居中
借用元素居中

实现代码

/* 这里的span标签 换成伪元素会更好一些,基本原理就是将新增的元素的高度设为父级高度,将其作为一个参照物,img标签相对于该元素垂直居中 */
span {
  display: inline-block;
  height: 100%;
  width: 0px;
  vertical-align: middle;
}
img {
  max-width: 90%;
  vertical-align: middle;
}

/* IE7+ 测试环境最低只有ie7 */
<div>
  <span></span>
  <img src="./images/1.jpg" alt="">
</div>
<div>
  <span></span>
  <img src="./images/2.jpg" alt="">
</div>
<div>
   <span></span>
   <img src="./images/3.jpg" alt="">
</div>
  • 优点:兼容性好
  • 缺点:多了一个标签,css代码较多
  • DEMO: 借用元素居中
背景图垂直居中

实现代码

background: url("./images/1.jpg") center no-repeat;

/* IE7+ 测试环境最低只有ie7 */
<!-- 3个背景图就要写三份代码  -->
<div></div>
<div></div>
<div></div>
  • 优点: css代码精简,利于性能优化(base64图片压缩),兼容性好
  • 缺点: 一个dom只能对应一张背景图,在多张图片的情况下css代码会有些繁重
  • DEMO: 背景图垂直居中
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值