日期:2014-05-17  浏览次数:20861 次

让一个DIV在BODY的中央
HTML code


<head runat="server">
    <title></title>
   <style type="text/css">
       body
       {
           height:100%;
           background-color:#F9F8F8; 
           padding:0px;         
       }
   #login
   {
       background-color:White; 
       height:300px;
       margin-left:0px;
       margin-right:0px;
       margin-top:auto;
       margin-bottom:auto;       
       
   }
   
   
   </style>
</head>
<body>
  
    <div id="login">
    nihao
    </div>
    
</body>
</html>



现在是DIV在整个BODY的上方。
我的要求是,DIV在BODY的中央,DIV高度我自己可以设置,然后DIV将BODY分为上下两截(两截面积相等),
宽度要和BODY一样(现在左右还有一些BODY露出来了)

------解决方案--------------------
HTML code
<head runat="server">
    <title></title>
   <style type="text/css">
       body
       {
           height:100%;
           background-color:#F9F8F8; 
           padding:0px;         
       }
   #login
   {
       background-color:White; 
       height:300px;
       margin-left:0px;
       margin-right:0px;
       margin-top:auto;
       margin-bottom:auto;
       position:absolute;top:50%;margin-top:-150px;
       width:100%;
   }
   
   
   </style>
</head>
<body>
  
    <div id="login">
    nihao
    </div>
    
</body>
</html>

------解决方案--------------------
探讨

引用:

不是写给你了吗??
用绝对定位 负边距拉此元素的一半高度就可以垂直居中了


垂直居中是可以了!但是DIV左边还是露了一点BODY,而且怎么宽度超出了浏览器的宽度,有横向滚动条了