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

最新推荐文章于 2025-08-12 15:59:30 发布

原创最新推荐文章于 2025-08-12 15:59:30 发布 · 745 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#水平居中 #css

css 专栏收录该内容

6 篇文章

订阅专栏

<!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>