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

 

用CSS让未知高度内容垂直方向居中,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。