css图片水平垂直居中

最新推荐文章于 2024-04-25 13:27:51 发布

原创最新推荐文章于 2024-04-25 13:27:51 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了使用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>

优点： css代码量少，html结构清晰，兼容性好
缺点： margin无效，padding会影响父级
解决方法： display: table-cell 无法使用 margin/ padding 的解法
DOEM: table-cell居中

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: 背景图垂直居中