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