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

時間 2019-12-09

標籤 css 未知高度內容垂直方向居中欄目 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實現，但缺點是要知道居中內容的寬度和高度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。