实现div中的img图片垂直水平居中

最新推荐文章于 2020-10-26 17:26:35 发布

Jenn168

最新推荐文章于 2020-10-26 17:26:35 发布

阅读量905

点赞数

分类专栏：前端开发文章标签： html

本文链接：https://blog.csdn.net/Jenn168/article/details/107733457

版权

前端开发专栏收录该内容

13 篇文章 3 订阅

订阅专栏

body结构

<body>
	<div>
		<img src="1.jpg" alt="haha">
	</div>
</body>

方法一（display: table-cell）

将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width:150px;
		height: 100px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		border:1px solid #000;
	}
	img {
		width: 50px;
		height: 50px;
	}
</style>

方法二（position定位）

通过position定位来实现。
将父容器div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要使图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。

<style type="text/css">
	*{ margin: 0; padding:0; }
	div{
		width:150px;
		height: 100px;
		position: relative;
		border:1px solid #000;
	}
	img {
		width: 50px;
		height: 50px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -25px; /* 高度的一半 */
		margin-left: -25px; /* 宽度的一半 */
	}
</style>

方法三（在不清楚图片或元素的真实宽高情况下：position + transform）

将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要使图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%, -50%);

<style type="text/css">
	*{ margin: 0; padding:0; }
	div{
		width:150px;
		height: 100px;
		position: relative;
		border:1px solid #000;
	}
	img {
		width: 50px;
		height: 50px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -25px; /* 高度的一半 */
		margin-left: -25px; /* 宽度的一半 */
	}
</style>

方法四（不确定真实宽高：position + margin ）

将div设置成相对定位relative，将img设置成绝对定位absolute，left:0，top:0，right:0, bottom:0，此时图片位于div的左上角，要使图片的中心位于div的中心，就需要将图片向下移动图片高度的一半，并向右边移动图片宽度的一半，当不知道元素宽高的情况下，可以用 margin:auto 填充外边距使图片居中。

<style type="text/css">
	*{ margin: 0; padding:0; }
	div{
		width:150px;
		height: 100px;
		position: relative;
		border:1px solid #000;
	}
	img {
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
</style>

方法五（弹性布局flex ）

将display设置成flex，然后水平居中设置justify-content为center，垂直居中设置align-items为center。

<style type="text/css">
	*{ margin: 0; padding:0; }
	div{
		width:150px;
		height: 100px;
		border:1px solid #000;
		display: flex;
		justify-content: center;    /*  两端对齐 */
		align-items: center;        /*  垂直对齐 */
	}  
	img {
		width: 50px;
		height: 50px;
	}
</style>