1. 爱易网页
  2. HTML教程
  3. 让一个DIV在BODY的中央解决办法

让一个DIV在BODY的中央解决办法

日期：2014-05-17　 浏览次数：21036 次

让一个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，而且怎么宽度超出了浏览器的宽度，有横向滚动条了

相关资料更多>

  1. 高效率整洁CSS代码原则
  2. CSS样式表高效使用的技巧
  3. 求美工达人给个美工制作网页全过程,该如何解决
  4. 表格行数不确定，怎么为表格最后一行指定样式
  5. 利用CSS控制表格的交替颜色
  6. 还是谷歌比较厚道，网址提交一天不到就收录了，而国内的老大百度小弟我都提交了多少次了，居然还不收录，为什么会这样
  7. xhtml上滤镜如何不起作用了
  8. white-space: nowrap中的wrap如何理解
  9. 作为内联样式，在火狐和IE6显示正常；作为外联样式，火狐正常，IE6就是没有引入CSS的HTML内容。该如何处理