图片快速居中在div中

最新推荐文章于 2023-08-13 00:34:20 发布

逆光者

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量286

点赞数

分类专栏： html+css 文章标签：图片垂直水平居中在div中兼容ie678

本文链接：https://blog.csdn.net/m0_37246536/article/details/78728247

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

兼容IE6.IE7.IE8的图片在div中快速水平垂直居中(包括固定div的宽高和不定宽高两种情况)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.outside_box{width: 300px;height: 300px;border: 1px solid #000;position: relative;}
.inside_box{width: 100%;height: 100%;} /*button设置宽高跟div一样*/

/*方法1:*/
.inside_image{
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin-top: -75px;
margin-left: -75px;
}
/*方法2*/
.inside_image{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 150px;
height: 150px;
margin: auto;
}
</style>
</head>
<body>

<div class="outside_box">

<img class="inside_image" src="images/6.png"/>

</div>

<hr />

<div class="outside_box">
<button class="inside_box">
<img class="inside_image" src="images/6.png"/>
</button>
</div>
<hr />

<div>
<button style="height: 100%; width: 100%;">
<img src="images/6.png"/>
</button>
</div>
</body>
</html>