用CSS让未知高度内容垂直方向居中

浏览数：48 / 时间：2015年06月09日

<!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实现，但缺点是要知道居中内容的宽度和高度。