<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<style type="text/css">
#outer{
width:500px;
height:200px;
margin: 50px auto;
border:1px solid #CCC;
display:table;
text-align:center;
#position:relative;
}
#middle{
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
#left:50%;
}
#inner{
#position:relative;
#top:-50%;
#left:-50%;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>
</div>
</body>
</html>原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<style type="text/css">
#outer{
width:500px;
height:200px;
margin: 50px auto;
border:1px solid #CCC;
position:relative;
}
#inner{
position:relative;
left:50%;
top:50%;
margin-left:-71px;
margin-top:-27px;
}
</style>
</head>
<body>
<div id="outer">
<img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
</div>
</body>
</html>用负margin实现，但缺点是要知道居中内容的宽度和高度。
用CSS让未知高度内容垂直方向居中
时间： 2024-08-28 15:32:21