Open Toolbar
关闭导航栏
您现在的位置: 全景之家 >> 网页设计 >> htmlcss技巧 >> 正文

利用CSS使Div水平垂直居中

作者:charlee    文章来源:creamu.com    点击数:    更新时间:2008-3-31          ★★★

通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。

这个方法出自creamu.com。先来看看代码和效果吧。

<style>
#warp {
  position: absolute;
  width:500px;
  height:200px;
  left:50%;
  top:50%;
  margin-left:-250px;
  margin-top:-100px;
  border: solid 3px red;
}
</style>
<body>
  <div id=warp>Test</div>
</body>
centered-div.png

原理很简单:将left和top设置为50%来定位div到浏览器中央,再将margin-left和margin-top值设置为宽和高的一半,使div居中显示。

文章录入:lc637    责任编辑:rogers 

推荐图文

· IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2
· 划动门菜单技术
· 网页中常见的斜条纹做法
· 动网论坛(SQL)安装说明
· 服务器应用:IIS建FTP服务器(三)
· 服务器应用:IIS建FTP服务器(二)

| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站地图 | 在线投稿 |