浏览 8693 次
|
锁定老帖子 主题：div层在html页面中垂直居中
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-12-12
<style>
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:#333;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;left: 0}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; margin: 0 auto;}
#content{width:500px; height:400px; border:1px solid red; background:#EEE; margin: 0 auto;}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">div层在html页面中垂直居中div层在html页面中垂直居中div层在html页面中垂直居中div层在html页面中垂直居中div层在html页面中垂直居中</div>
</div>
</div>
</div>
</body>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
