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

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

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

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>