6种css控制元素上下居中效果 -凯发ag旗舰厅登录网址下载

 通常我们用到的css布局都是左右居中，经典css写法如下：

body{       margin:0;       padding:0;       width:100%;       height:100%;   }   div{       margin:0 auto;       width:500px;       heigth:auto;   }   上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是 大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：
body{       margin:0;       padding:0;       width:100%;       height:100%;   }   div{      position:absolute;      top:50%;      left:50%;      margin-top:-250px;      margin-left:-250px;       /*此时宽和高都要固定*/       width:500px;       heigth:500px;   }   上面的margin可以合并：margin:-250px 0 0 -250px; 大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px 向左回退div宽的50%即：margin-left:-250px 好了大功告成。 内部元素不固定大小的情况：

<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>

 
   
   
 
 
 
   

    

     

      
       
         
         
        
        
         
         
        
        
         
         
        
      

帐号：
密码：

     

    

   
 

 

 

 

第3中方式

 
 

 

 第4中方式：

        style="width:300px;height:200px;background: no-repeat; position: absolute; top:50%;margin-top:-100px; left:50%; margin-left:-150px;">
    

     
      
      
     
     
      
      
     
     
      
      
     
     
    

帐号：	style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
密码：	style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">