用div+css实现水平垂直居中

概述网(LieHuo.Net)教程 以前我们做网页布局时要实现页面水平垂直居中的方法需要用js代码来实现。这样故然是一种好的方法，但是对于js 代码不懂的不熟的朋友来说也是比较困难的。今天我们就来讲一下如何用div+css实现水平垂直局中的呢。请大家先来看一下效果图：这里我只是截了个图示范一下。…

　　内存溢出 jb51.cc 以前我们做网页布局时要实现页面水平垂直居中的方法需要用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 来实现页面水平垂直居中的效果，都存在一个缺陷，那就是在小屏幕的情况下，没有滚动条也看完整。

总结

以上是内存溢出为你收集整理的用div+css实现水平垂直居中全部内容，希望文章能够帮你解决用div+css实现水平垂直居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。