找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1891|回复: 0

[教程] 用div+css实现水平垂直居中

[复制链接]
发表于 2013-4-2 16:37:21 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
以前我们做网页布局时要实现页面水平垂直居中的方法需要用 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 来实现页面水平垂直居中的效果,都存在一个缺陷,那就是在小屏幕的情况下,没有滚动条也看完整。


发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-5 13:27 , Processed in 0.045315 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表