在固定尺寸的盒子，水平垂直居中不知宽高的图片

来源：互联网发布：宏信证券交易软件编辑：程序博客网时间：2024/04/28 01:43

在实际开发中，我们经常遇到在一个div里面，居中显示一张图片，下面是个人总结的一些方法：

1、vertical-align：middle方法

三个关键步骤：

a) img设置为 vertical-align: middle;

b)盒子添加 text-align: center;

c) 盒子添加after伪类，设置样式为content: '';vertical-align: middle;display: inline-block;width: 0;height: 100%;

具体代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{padding: 0;margin: 0;}img{vertical-align: middle;border: none;}div{width: 200px;height: 200px;border: 1px solid #000;text-align: center;}div:after{content: '';vertical-align: middle;display: inline-block;width: 0;height: 100%;}</style></head><body><div><img src="img1.jpg" alt=""></div></body></html>

效果图：

这个方法的优点是兼容到IE6

2、利用表格的特性，display:table-cell;

在盒子上添加display: table-cell;text-align: center;vertical-align: middle;

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{padding: 0;margin: 0;}img{border: none;}div{width: 200px;height: 200px;border: 1px solid #000;display: table-cell;text-align: center;vertical-align: middle;}</style></head><body><div><img src="img1.jpg" alt=""></div></body></html>

这个方法支持到ie8以上的浏览器

3、使用定位

步骤：

a)盒子添加position:relative;

b)img上添加position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;

具体代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{padding: 0;margin: 0;}img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;border: none;}div{width: 200px;height: 200px;border: 1px solid #000;position: relative;}</style></head><body><div><img src="img1.jpg" alt=""></div></body></html>

4、利用translate

步骤

a)盒子添加position:relative;

b)图片添加position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{padding: 0;margin: 0;}img{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border: none;}div{width: 200px;height: 200px;border: 1px solid #000;position: relative;}</style></head><body><div><img src="img1.jpg" alt=""></div></body></html>

5、弹性盒模型

在盒子上添加display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;

具体代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{padding: 0;margin: 0;}img{border: none;}div{width: 200px;height: 200px;border: 1px solid #000;display: -webkit-box;display: flex;/*垂直居中*/-webkit-box-align: center;align-items: center;/*水平居中*/-webkit-box-pack: center;justify-content: center;}</style></head><body><div><img src="img1.jpg" alt=""></div></body></html>

0 0