您的位置：首页 > 其它

固定宽高的div在浏览器中垂直居中

2008-07-22 12:44 239 查看
前段时间做的一个网络应用程序，在后期的测试时发现了一个问题。在不同的显示器（17寸/19寸）上显示有很大的区别。我的登录界面在19宽屏上就不是居中显示了。

想了很多方法，在17屏上就没问题，居中显示。后来考虑采用固定宽高的DIV来显示登录的界面，可以实现居中的效果，并已测试通过。
首先在CSS文件中添加DIV的样式，具体如下：
.div
{
position:absolute;
top:50%;left:50%;
width:980px;height:368px;
margin:-184px 0 0 -490px;
border:0px solid #000000;
}

position:absolute，绝对定位，可以把这个div看成漂浮于这个页面之上的，通过top：50%和left：50%定位这个div的位置，但这个时候，垂直与水平居中的是这个div 左上角这一点。

所以，要让这个div的中心点位于整个页面的中间，需要使用负边界，负的上边界，负值是高度的一半；负的左边界，负值是宽度的一半。

然后，把登录界面的table包含在<div></div>中，同时设定<div class='div'>。最后别忘了在<HEAD></HEAD>中加入CSS文件的引用：


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航