CSS解决未知高度垂直居中
十二月 15, 2009 by zeze · Leave a Comment
HTML
<div id=”outer”>
<div id=”middle”>
<div id=”inner”>CSS解决未知高度垂直居中</div>
</div>
</div>
<div id=”middle”>
<div id=”inner”>CSS解决未知高度垂直居中</div>
</div>
</div>
CSS
<style type=”text/css”><!–
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: #fff;}
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: #fff;}
*+html #outer[id] {position: relative;} /* for IE7 */
*+html #middle[id] {position: absolute;} /* for IE7 */
–></style>
*+html #middle[id] {position: absolute;} /* for IE7 */
–></style>
支持上下左右垂直居中，但!DOCTYPE声明为：
“<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>”
老的的声明:“<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>”
测试会出现上下居中，左右就不会居中了，呵呵。我用过好几次居中案例，忘记声明更改，老出问题。希望注意。
相关文章
« 上页 用CSS实现内容的垂直居中网页中运行代码功能–js代码 下页 »
