水平垂直居中

以前我们做网页布局时要实现页面水平垂直居中的方法需要用 js 代码来实现。这样故然是一种好的方法，但是对于js 代码不懂的不熟的朋友来说也是比较困难的。今天我们就来讲一下如何用 div+css 实现水平垂直局中的呢。请大家先来看一下效果图： 这里我只是截了个图示范一下。 用div+css实现水平垂直居中的css样式代码部分： <style type="text/css"> /* 居中层CSS*/ #center { height:0px; width:0px; /* 设置位置*/ top:50%; left:50%; position:absolute; } /* 内容层CSS*/ #content { background:#FF9933; width:300px; height:200px; /* 设置浮动，脱离居中层限制（菜单什么很有用哦）*/ position:absolute; /* 这里设置的2个值，第一个是宽，第二个是高，但都是这个DIV的宽高的一半*/ margin:-150px 0 0 -100px; /* 演示用*/ color:#fff; } </style> 具体的效果还请大家自己 下载源代码 去运行查看一下效果，就会明白的。希望能对给您好带来帮助。 提醒一下大家不管是用 div+css 来实现页面水平垂直居中还是通过 js 来实现页面水平垂直居中的效果