未知宽高的img在已知宽高的div中水平垂直居中的几种方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
float: left;
}
.box1{

width: 400px;

height: 400px;

border:1px solid #000;

display: table-cell;

text-align: center;

vertical-align: middle;
/*不能浮动,即使父级小也会自动撑开父级*/
}

.box1>img{

vertical-align: middle;

}

.box2{

position: relative;

overflow: hidden;

width: 400px;

height: 400px;

border:1px solid #000;

/*父级必须比子级大,有可能包不住图片,包不住的时候从左上方开始截*/

}
.box2>img{
position:absolute;

margin: auto;

top: 0;

bottom: 0;

right: 0;

left: 0;

}

.box3{

position: relative;

overflow: hidden;

width: 400px;

height: 400px;

border: 1px solid #000;

/*父级必须比子级大,有可能包不住图片,包不住的时候从图片中间开始截*/

}
.box3>img{

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}
.box4{

width: 400px;

height: 400px;

line-height: 400px;

font-size: 0;

text-align: center;

border: 1px solid #000;

/*font-size:0不写居中是有误差的*/

}

.box4>img{

vertical-align:middle;

}
.box5{

display: -webkit-box;

display: box;

display: -webkit-flex;

display: flex;

width: 400px;

height: 400px;

align-items: center;

justify-content: center;

border: 1px solid #000;

/*父级必须比子级大,有可能包不住图片,包不住的时候从图片中间开始截*/

}
.box6{

width: 400px;

height: 400px;

display: table-cell;

text-align: center;

border: 1px solid red;

/*如果div比图片小就不会显示图片了*/

}

.box6>span{

display:inline-block;

height:100%;

vertical-align:middle;

}

.box6>img{

vertical-align: middle;

}
.box7{

width: 400px;

height: 400px;

position:relative;

display: table;

border: 1px solid #000;
}
.box7>span{

*position:absolute;/*IE7*/

top:50%;

left: 50%;

display:table-cell;

text-align:center;

vertical-align:middle;

}
.box7>span>img{

*position:relative;/*IE7*/

top:-50%;

left: -50%;

vertical-align:top;

}
</style>
</head>
<body>
<div class="box1"><img src="biaoge-image.png" alt=""></div>
<div class="box box2"><img src="biaoge-image.png" alt=""></div>
<div class="box box3"><img src="biaoge-image.png" alt=""></div>
<div class="box box4"><img src="biaoge-image.png" alt=""></div>
<div class="box box5"><img src="biaoge-image.png" alt=""></div>
<div class="box box6"><span></span><img src="biaoge-image.png" alt=""></div>
<div class="box box7"><span><img src="biaoge-image.png" alt=""></span></div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值