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

为什么80%的码农都做不了架构师？>>>   

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

转载于:https://my.oschina.net/oecp/blog/28099