<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></p><p><title>上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中</title></p><p><style type="text/css"></p><p>* {</p><p>margin:0;</p><p>padding:0;</p><p>}</p><p>html,</p><p>body,</p><p>#box {</p><p>height:100%;</p><p>font:small/1.5 "宋体", serif;</p><p>}</p><p>body {</p><p>text-align:center;</p><p>}</p><p>#box {</p><p>text-align:left;</p><p>background:#666;</p><p>display:table;</p><p>width:80%;</p><p>margin:0 auto;</p><p>position:relative;</p><p>}</p><p>#box > div {</p><p>display:table-row;</p><p>}</p><p>#header,</p><p>#footer {</p><p>background:#fcc;</p><p>height:50px;</p><p>}</p><p>#main {</p><p>background:#ccf;</p><p>}</p><p>#main #wrap {</p><p>display:table-cell;</p><p>background:#ffc;</p><p>vertical-align:middle;</p><p>}</p><p>#text {</p><p>text-align:center;</p><p>}</p><p></style></p><p><!–[if IE]></p><p><style type="text/css"></p><p>#header,</p><p>#footer {</p><p>width:100%;</p><p>z-index:3;</p><p>position:absolute;</p><p>}</p><p>#footer {</p><p>bottom:0;</p><p>}</p><p>#main {</p><p>height:100%;</p><p>z-index:1;</p><p>position:relative;</p><p>}</p><p>#main #wrap {</p><p>position:absolute;</p><p>top:50%;</p><p>width:100%;</p><p>text-align:left;</p><p>}</p><p>#main #text {</p><p>position:relative;</p><p>width:100%;</p><p>top:-50%;</p><p>background:#ccc;</p><p>}</p><p></style></p><p><![endif]–></p><p></head></p><p><body></p><p><div id="box"></p><p><div id="header">header</div></p><p><div id="main"></p><p><div id="wrap"></p><p><div id="text"></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p></p><p><p>内容内容</p> <div class="pagination"><a title="Page"> <b>2</b>/<b>3</b> </a> <a href="/cos/2020/0509/505092.shtml">首页</a> <a href="/cos/2020/0509/505092.shtml">上一页</a> <a href="/cos/2020/0509/505092.shtml">1</a> <b>2</b> <a href="/cos/2020/0509/505092_3.shtml">3</a> <a href="/cos/2020/0509/505092_3.shtml">下一页</a> <a href="/cos/2020/0509/505092_3.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div> <div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div> <div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声 2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div> <div class="txtInfo"><h3>靠谱助手怎么ROOT 靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div> <div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div> <div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div> <div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div> <div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div> <div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div> <div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div> <div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div> <div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div> <div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声 2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div> <div class="txtInfo"><h3>靠谱助手怎么ROOT 靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div> <div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div> <div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div> <div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div> <div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div> <div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div> <div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div> <div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0509/505092.shtml", "title": "CSS布局实例:上中下三行,中间自适应-易采站长站", "description": "上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。 firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。 对于非ie内核浏览器，通过设定display:table、display:t", "pubDate": "2020-05-09 T 07:24:54+08:00", "upDate": "2020-05-09 T 07:24:54+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0509/505092.shtml", "wapUrl":"https://www.easck.com/cos/2020/0509/505092.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
