你一定不知道div里的图片是如何水平垂直居中的

互联网 20-7-1

你一定不知道div里的图片是如何水平垂直居中的，这里小编提供了五种居中的方法，大家一起来看看吧。

body结构

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

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

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

结果如下图所示：

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

<style type="text/css"> 	*{margin: 0;padding:0;} 	p{ 		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定位来实现。将p设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于p的中心，要是图片的中心位于p的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%,-50%);

<style type="text/css">     *{margin: 0;padding:0;}     p{         width:150px;         height: 100px;         position: relative;         border:1px solid #000;     }     img {         width: 50px;         height: 50px;         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%,-50%);     } </style>

方法四：

<style type="text/css">     *{margin: 0;padding:0;}     p{         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

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

效果都一样，希望能帮到大家！

本文转自：https://blog.csdn.net/DreamFJ/article/details/68921957

推荐教程：《HTML教程》

以上就是你一定不知道div里的图片是如何水平垂直居中的的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：居中