CSS之实现div⾥的img图⽚⽔平垂直居中
body结构
<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>
⽅法⼀：
将display设置成table-cell，然后⽔平居中设置text-align为center，垂直居中设置vertical-align为middle。
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
css设置文字垂直居中img {
width: 50px;
height: 50px;
}
⽅法⼆：
通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图⽚的左上⾓位于div的中⼼，要是图⽚的中⼼位于div的中⼼，就需要将图⽚向上移动图⽚⾼度的⼀半，并向左移动图⽚宽度的⼀半。
*{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; /* 宽度的⼀半 */
}
结果如下：
如果是div⾥的背景图⽚可以⽤以下⽅法：
.demo{
width: 300px;
height:300px;
background-image: url('../picture/a.jpg');        background-size: 100% 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.
demo{
width: 300px;
height: 300px;
background-image: url('../picture/a.jpg');    background-size: 100% 100%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。