当前位置：首页 → 问答吧 → div 多行多列垂直居中如何实现

div 多行多列垂直居中如何实现

时间：2011-06-14

来源：互联网

这问题困扰了24小时了。仍然没有解决。网上找了很多方法都无效。

我希望实现这样的效果：
1、兼容IE6/7/8/FF4/CHROME/SAFARI
2、多行多列垂直居中。
关于第二条，小弟我详细说说。
比如我们都喜欢玩的DZ论坛。左边是版块名、版块介绍、版主【版块介绍可能占多行，所以这个行数不确定】。中间是发贴数回贴数【一行】，右边是最后发表的贴子、发表人、发表时间【一般占2行】

到现在还没找到符合我第一条的方法。
下面我提供一个除了IE7都兼容的代码，希望有高手能帮忙把IE7的问题解决一下。非常感谢。

测试环境：ietester

CSS code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.frame{
    float:left;
    margin:2px;
}
.outer {
    height: 200px;
    width: 240px;
    overflow: hidden;
    background:gold;
    position: static !important;
    position: relative;
    display: table !important;
}
#middle { /* for explorer only*/
    position: absolute;
    top: 50%;
}
#middle[id] {
    display: table-cell;
    vertical-align: middle;
    position: static;
}
#inner { /* for explorer only */
    position: relative;
    display: table-cell!important;
    top: -50%;
    width: 100%;
    margin: 0 auto;
    text-align:center
}
</style>
</head>
<body>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner">文本垂直居中文本垂直居中<br>文本垂直居中<br>文本垂直居中<br>文本垂直居中<br>文本垂直居中</div>
        </div>
    </div>
</div>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner"><span>文本垂直居中文本垂直居中</span><span>文本垂直居中文本垂直居中文本垂直居中</span></div>
        </div>
    </div>
</div>
<div class="frame">
    <div class="outer">
        <div id="middle">
            <div id="inner">11111111111111111<br>222222222222222<br>3333333333333<br>4444444444444444<br>555555555555<br>666666666666<br>777777777777777<br>8888888888888<br></div>
        </div>
    </div>
</div>
</body>
</html>