实现div中的img图片垂直水平居中
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>
上一篇： 图片万能居中css图片居中
下一篇： Web前端——HTML中的标签