让一个DIV在BODY的中央

xuhui3124563 2011-12-29 04:00:30 




<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露出来了）
...全文
416 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
p2227 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 nx8823520 的回复:]

HTML code
<head runat="server">
<title></title>
<style type="text/css">
body
{
height:100%;
background-color:#F9F8F8;
padding:0;
ma……
[/Quote]嗯，因为本人CSS比较菜，老是不能跟HTML结合一起
籽沫 2011-12-29
  • 打赏
  • 举报
 回复 
<head runat="server">

    <title></title>

   <style type="text/css">

       body

       {

           height:100%;

           background-color:#F9F8F8; 

           padding:0; 

		   margin:0;

       }

   #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%;

	   padding:0;margin:0;

   }

   

   

   </style>

</head>

<body>

  

    <div id="login">

    nihao

    </div>

    

</body>

</html>

这样就好了，因为div宽度设置100%加上默认内外边距也就会这样了

还有“p2227”只所以设置了还会有是因为不仅仅元素会有默认内外边距，body也是会有的它页是根元素，同时用*真的很影响性能
xuhui3124563 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 jy02409187 的回复:]

引用 12 楼 xuhui3124563 的回复:

引用 8 楼 nx8823520 的回复:

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


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

在body 加个 margin:0 NND 我不是一直写这个吗。。。
[/Quote]可以了……多谢各位……！
jy02409187 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 p2227 的回复:]

引用 10 楼 nx8823520 的回复:

引用 9 楼 p2227 的回复:

参考6楼写了这个，在IE6下面可能要用css hack另外再设置

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr……
[/Quote]
这个 *{margin:0px;padding:0px;} 最好不要用 因为这个是对所有的标签，有很多标签是不需要的
body, ul, li, h1, h2, h3, h4, h5, h6, p, th, td, dl, dt, dd{ margin:0; padding:0}
p2227 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 xuhui3124563 的回复:]

引用 8 楼 nx8823520 的回复:

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


垂直居中是可以了！但是DIV左边还是露了一点BODY，而且怎么宽度超出了浏览器的宽度，有横向滚动条了
[/Quote]你用什么浏览器？13楼这个是可以的。
jy02409187 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 xuhui3124563 的回复:]

引用 8 楼 nx8823520 的回复:

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


垂直居中是可以了！但是DIV左边还是露了一点BODY，而且怎么宽度超出了浏览器的宽度，有横向滚动条了
[/Quote]
在body 加个 margin:0 NND 我不是一直写这个吗。。。
p2227 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 nx8823520 的回复:]

引用 9 楼 p2227 的回复:

参考6楼写了这个，在IE6下面可能要用css hack另外再设置

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xm……
[/Quote]哦，这样子，因为我之前也试过设置，可能设置得不对，唯有原子弹全炸掉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>111</title>

<style type="text/css">

*{margin:0px;padding:0px;}

body

       {

           height:100%;

           background-color:red; 

           padding:0px;         

       }

   #login

   {

	  background-color:White; 

       height:300px;

       position:absolute;top:50%;margin-top:-150px;/*margin-left:-8px;*/

       width:100%;   

       

   }

</style>

<script type="text/javascript">

<!--

-->

</script>

</head>



<body>

<div id="login">

    nihao

    </div>

    

</body>

</html>
xuhui3124563 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 nx8823520 的回复:]

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

垂直居中是可以了！但是DIV左边还是露了一点BODY，而且怎么宽度超出了浏览器的宽度，有横向滚动条了
jy02409187 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 xuhui3124563 的回复:]

引用 3 楼 jy02409187 的回复:

（现在左右还有一些BODY露出来了） body
{
height:100%;
background-color:#F9F8F8;
padding:0px;
margin:0;
}


怎么个横法

就是我头像黑色的那条横杠，但是只有一条，在中间
[/Quote]

直接说DIV垂直居中就好了麻

body
{
background-color:#F9F8F8;
padding:0;
margin:0
}
#login
{
background-color:White;
width:100%;
height:300px;
position:absolute;
top:50%;
margin-top:-150px;
}
籽沫 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 p2227 的回复:]

参考6楼写了这个，在IE6下面可能要用css hack另外再设置

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org……
[/Quote]

搞不懂你为什么要加那个left的负边距，之所以会有那个边距并不是IE6的问题也不需要所谓的hack，引起这个原因元素是浏览器默认的内外边距引起的，只需要设置这个div的内外边距为0就好了，碰到问题不要首先想到hack而是想想为什么
p2227 2011-12-29
  • 打赏
  • 举报
 回复
参考6楼写了这个，在IE6下面可能要用css hack另外再设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>111</title>

<style type="text/css">

body

       {

           height:100%;

           background-color:red; 

           padding:0px;         

       }

   #login

   {

	  background-color:White; 

       height:300px;

	   width:100%;



       position:absolute;top:50%;margin-top:-150px;margin-left:-8px;

       width:100%;   

       

   }

</style>

<script type="text/javascript">

<!--

-->

</script>

</head>



<body>

<div id="login">

    nihao

    </div>

    

</body>

</html>
籽沫 2011-12-29
  • 打赏
  • 举报
 回复
不是写给你了吗？？
用绝对定位 负边距拉此元素的一半高度就可以垂直居中了
xuhui3124563 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 nx8823520 的回复:]

HTML code
<head runat="server">
<title></title>
<style type="text/css">
body
{
height:100%;
background-color:#F9F8F8;
padding:0px;
……
[/Quote]
烦劳高手写一下，我一直弄后台，前台CSS真不会
籽沫 2011-12-29
  • 打赏
  • 举报
 回复 
<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>


垂直居中方法很多 可以用定位最方便
xuhui3124563 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 jy02409187 的回复:]

（现在左右还有一些BODY露出来了） body
{
height:100%;
background-color:#F9F8F8;
padding:0px;
margin:0;
}


怎么个横法
[/Quote]
就是我头像黑色的那条横杠，但是只有一条，在中间
p2227 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 jy02409187 的回复:]

（现在左右还有一些BODY露出来了） body
{
height:100%;
background-color:#F9F8F8;
padding:0px;
margin:0;
}


怎么个横法
[/Quote]参考楼主的头像
jy02409187 2011-12-29
  • 打赏
  • 举报
 回复
（现在左右还有一些BODY露出来了） body
{
height:100%;
background-color:#F9F8F8;
padding:0px;
margin:0;
}


怎么个横法
xuhui3124563 2011-12-29
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 jy02409187 的回复:]

margin:auto
[/Quote]
不行的，我要DIV横向的在BODY中间
jy02409187 2011-12-29
  • 打赏
  • 举报
 回复
margin:auto
vue中的非父子间的通讯问题简单的实例代码
官网上的例子好晦涩，看了一个头两个大，关于非父子间的通讯问题，经过查阅得到了下面的例子， <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>兄弟之间的通讯问题</title> [removed][removed] </head> <body> <div id=app> div> [removed] //创建中央事件总线。 var bus =new Vue(); // 组件one Vue.compo
如何让一个div居于页面正中间
让div居于屏幕正中间的方法1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div居于页面正中间</title> <style type="text/css"> *{ margin: 0; padding: 0; bac
让div在页面居中的方法
使用弹性盒子布局和相对定位实现div在页面中的中心位置的定位
怎么让小div位于大div的正中央,div位于屏幕的正中央的解决方法
1.怎么设置一个div位于另一个div的正中央? <!doctype html> <html> <head> <title></title> <style type="text/css"> #div1{ width: 400px; height: 400px; background: #ccc; ...
让一个div居于页面正中间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div居于页面正中间</title> <style type="text/css"> *{ ...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章