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

//方法一:通用方案,可兼容IE6/7

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




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

你可能感兴趣的:(CSS)