未知宽高的img在容器里实现水平垂直居中

最新推荐文章于 2022-03-06 21:25:07 发布

置顶 Mr Gong

最新推荐文章于 2022-03-06 21:25:07 发布

阅读量755

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/74531491

CSS 专栏收录该内容

8 篇文章

订阅专栏

//方法一：通用方案，可兼容IE6/7
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
    <img src="bigptr.jpg" />
    <span></span>
</div>
</body>
</html>



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
//方法二：IE6下有效，标准浏览器无效
/*.box{ width:800px;height:600px;border:2px solid #000;position:relative;text-align:center;overflow: hidden;}
.box div{position: absolute;left: 50%;top: 50%;}
img{vertical-align: bottom;position: relative;top: -50%;left: -50%;}
*/

/*
方法三：标准浏览器下有效，不支持IE6/7，该方法非常方便，推荐大家使用
单独设置水平方向的两个偏移量为0时，可实现水平居中
单独设置垂直方向的两个偏移量为0时，可实现垂直居中
*/
.box{width: 800px;height: 600px;text-align: center;border: 2px solid black;position: relative;}
img{vertical-align: bottom;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}

/*
display:table-cell配合text-align:center/vertical-align:top可实现标准浏览器下的水平垂直居中，加上css hack配合方法一可以兼容IE6/7。所以此方法也可作为通用的水平垂直居中方案
*/
/*.box{width: 800px;height: 600px;text-align: center;border: 2px solid black;display: table; *position:relative;overflow: hidden;}
.box div{display: table-cell;vertical-align: middle;*position: absolute;left: 50%;top: 50%;}
img{vertical-align: bottom;*position: relative;left: -50%;top: -50%;}*/

</style>
</head>
<body>
<div class="box">
    <div><img src="bigptr.jpg" /></div>
</div>
</body>
</html>