css图片水平垂直居中

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