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

最新推荐文章于 2024-08-08 16:10:15 发布

wf2017

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量890

点赞数

文章标签：前端居中

本文链接：https://blog.csdn.net/wf2017/article/details/55504858

版权

在实际开发中，我们经常遇到在一个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>