用CSS讓未知高度內容垂直方向居中

microsoft_kk發表於2014-08-07
CSS
<!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實現，但缺點是要知道居中內容的寬度和高度。

 

相關文章