如何让div在不同的屏幕里上下左右都居中？_百度知道
如何让div在不同的屏幕里上下左右都居中？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自百度知道认证团队
采纳数：70
获赞数：399
擅长：暂未定制
通常我们用到的css布局都是左右居中，经典css写法如下：body{ & margin:0; & & &padding:0; & & &width:100%; & & &height:100%; &} &div{ & & &margin:0 & & &width:500 &height: &} &body{margin:0;padding:0;width:100%;height:100%;}div{margin:0width:500height:}上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：body{ & & &margin:0; & & &padding:0; &width:100%; &height:100%; &} &div{ & & position: & & top:50%; & & left:50%; & & margin-top:-250 & & margin-left:-250 & & &/*此时宽和高都要固定*/ & & &width:500 & & height:500 &} &body{margin:0;padding:0;width:100%;height:100%;}div{position:top:50%;left:50%;margin-top:-250margin-left:-250/*此时宽和高都要固定*/width:500height:500}上面的margin可以合并：margin:-250px 0 0 -250大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px向左回退div宽的50%即：margin-left:-250px&style type=&text/css&&&!--&div {position:top:50%;left:50%;margin:-150px 0 0 -200width:400height:300border:1px solid #008800;}--&&/style&&div&让层垂直居中于浏览器窗口&/div&其实解决的思路是这样的：首们需要position:绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写&注：上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上position:就好了；记住，外层div要设定高度和宽度
来自知道合伙人认证行家
互联网类行家
采纳数：11390
获赞数：14030
08年毕业，一直从事计算机行业，从基层做起。有较强的实践操作能力。
&style type=&text/css&&&!-- div {position:top:50%;left:50%;margin:-150px 0 0 -200width:400height:300border:1px solid #008800;}--&&/style&&div&让层垂直居中于浏览器窗口&/div&其实解决的思路是这样的：首们需要position:绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写 注：上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上position:就好了；记住，外层div要设定高度和宽度
本回答被网友采纳
来自知道合伙人认证行家
互联网类行家
采纳数：258
获赞数：1132
赵一鸣：毕业于北京联合大学。目前主要从事SEO与WEB前端开发。现任北京君石控股公司SEO工程师！
div在不同的屏幕中上下左右都居中显示，可以用一段代码来写。html部分：&div&class=&box&&这个div在不同的屏幕里上下左右都能居中！&/div&css部分：.box{width:100height:100margin:0px&auto}宽高可以根据自己的情况来设置，只要设置这个div的margin属性就可以使它居中。margin：上下距离 &左右距离。左右设置auto就是左右居中。至于上下居中，是这个div相对于它外部的div是居中的，可以在外部的那个div的css属性中设置padding（内边距）属性，调整一下距离就行！如果我的回答对你有用，可以采纳哦！
上下不能设置auto吗
margin后面总共有4个参数。比如：margin:1px 1px 1px 1px。分别表示 上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px，代表 上下都为1px 左右都为2px.至于居中，margin:0 auto 是标准的写法！如果我的回答对你有用，可以采纳哦！采纳了吗？
本回答被提问者采纳
1条折叠回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。html如何将一个div置于最上层_百度知道
html如何将一个div置于最上层
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自电脑网络类认证团队
采纳数：373
获赞数：1750
擅长：暂未定制
设置style&中&z-index:autoauto可定义为一个值(整数数字)，越大代表越置前，如可定义为：&z-index:999。若定义为-1，代表为最底层。div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。给div的style添加z-index:9999，数值越大，越在最上面。如果是被flash遮住的，可以把flash的wmode设置为transparent 。
__剧情丶1989
来自电脑网络类芝麻团
__剧情丶1989
采纳数：479
获赞数：1460
参与团队：
设置style&中&z-index:autoauto可定义为一个值(整数数字)，越大代表越置前，如可定义为：&z-index:999。若定义为-1，代表为最底层。div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。·测试效果：&!DOCTYPE&html&&&&&&html&&&&&&head&&&&&&meta&charset=&utf-8&&/&&&&&&title&div图层样式&/title&&&&&&style&&&&&.div-relative{position:&color:#000;&border:1px&solid�&width:500&height:400px}&&&&.div-a{&position:&left:30&top:30&background:#F00;&width:200&height:100px}&&&&/*&css注释说明：&背景为红色&*/&&&&.div-b{&position:&left:50&top:60&background:#FF0;&width:400&height:200px}&&&&/*&背景为黄色&*/&&&&.div-c{&position:&left:80&top:80&background:#00F;&width:300&height:300px}&&&&/*&DIV背景颜色为蓝色&*/&&&&&/style&&&&&&/head&&&&&&body&&&&&&div&class=&div-relative&&&&&&&div&class=&div-a&&我背景为红色&/div&&&&&&div&class=&div-b&&我背景为黄色&/div&&&&&&div&class=&div-c&&我背景为蓝色&/div&&&&&&/div&&&&&&/body&&&&&&/html&2、页面中实现的效果如下：
采纳数：382
获赞数：1402
给div的style添加z-index:9999，数值越大，越在最上面如果是被flash遮住的，可以把flash的wmode设置为transparent
本回答被提问者和网友采纳
来自电脑网络类芝麻团
采纳数：73
获赞数：275
擅长：暂未定制
参与团队：
把div设置成层，然后给层 添加 z-index:99999这里的数值9 最好是5位。
jqkalytrue
jqkalytrue
采纳数：453
获赞数：637
擅长：暂未定制
设置该div为绝对定位 设置zindex为最高
其他2条回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。在详细介绍之前，我们先简要的说明一下定位的4种方法：1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。2、绝对定位（absolute）：这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时，元素将保持它们各自的位置不变，随着页面一起滚动，就像粘在一起一样。3、固定定位（fixed）：这种方法允许元素相对于实际的浏览器窗口放置。4、相对定位（relative）：这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释，可喜的是这个方法使用的很少。静止定位static定位的默认值static，不使用定位属性和使用这个值对页面没有什么效果的。绝对定位absolute当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上。看看下面的例子：#sidebar{&position:&top:100&right:200&width:280&}&上 面说了被绝对定位的元素从流中间移走了，所以在流中间的任何元素将不会受到影响，看见过网站上的小广告吧，后面的文字不会受其任何的影响，就是这样的效 果！还有这里介绍的定位是指元素，对！是元素，也就是说你可以使用在任何的元素上（包括内联元素哦），当然更多的是使用在div上。那如果我放置两个绝对定位的元素，谁会被遮挡住呢？这里需要介绍一个叫做z-index的属性，将这个属性设置的值越大，那个元素就会出现的上面。我们来看看边上的效果。我们将前面的元素设置z-index:99;在绝对定位元素内嵌套的元素进行绝对定位会怎么样呢？这件事情是要说清楚的，不要说我们没有告诉你啊，它使用的绝对定位是相对于它的父级位置的，而不是整个页面的。注 意：个人认为不要使用绝对定位的方式去布局你的网站，因为网站的内容往往会根据你数据库内容的多少来显示，也就是说你不能完全确定网站的高度（还有一个原 因不是确定高度是因为宽屏的电脑越来越多了）。而绝对定位以后你将不能应对这样的变化，比如你不能确定你的页脚放置在什么位置上合适。固定定位fixed固定定位指定元素的位置和你使用绝对定位基本相同，不过作用不同。它的位置是相对于浏览器窗口的，下面的那个div就是的，你滚动一下鼠标的滚轮看看就清楚了。#sidebar{&position:&top:300&left:-90&width:280&}&注意：position:这个属性在IE6里面居然不兼容！现在使用IE6的可不少啊，那总不能就这样放任不管了吧，我提供了一个简单事例，大家可以看看通过Css hack是如何解决这个问题的。&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&&html xmlns=""&&&head&&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&&title&position:fixed in IE6 修正&/title&&&style type="text/css"&&&!--&body{padding:0 10height:100%;&font-size:12overflow-y:}&#leftMenu { background: #CCCCCC; height: 300 width: 150&&position: left: 40 top: 30 border: 1px solid #666666; padding: 10&&letter-spacing: 0.2 color:#990033;}&#main{ background:#36F; margin-top:450 margin-bottom:300&&float: padding:10 color:#FFF;}&* html{overflow-x:overflow-y:}&* html #leftMenu{position:}&--&&&/style&&&/head&&&body&&&div id="leftMenu"&&&&p&这是左侧的菜单，在标准的浏览器中采用固定定位，而非标准的浏览器（IE6）中，使用了一些HACK，和IE6本身的BUG！&/p&&&&p&enjoy it!（这句英语帅不？）&/p&&&/div&&&div id="main"&&&&p&这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！&/p&&&&p&拖动页面右边滚动条，你可以看到，灰色的左菜单始终固定，这种现象不止于IE7、FireFox，在IE6下也有较为完美的表现~这 个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！&/p&&&/div&&&/body&&&/html&&相对定位relative这 个方法使用的很少，可能大家都没有用过，或者别人使用了也看不出来。先来看看它的工作原理，相对定位的元素仍然是页面流的一部分，不同于绝对定位和固定定 位。但是它在显现自身的最后一刻叛变了，它离开了自己的岗位，偏移到Css指定的位置上，原来的岗位呢？还给他留着呢！谁逼迫它叛变的？我们使用的position:和浏览器就是元凶！大家可以试试看，你指定的家伙是怎么叛变的，我就不做这个恶人了。&
原文：http://www.360doc.com/content/11/47.shtml
阅读(...) 评论()html中如何使一个table或者div永远处于中间位置？_百度知道
html中如何使一个table或者div永远处于中间位置？
假设页面中有一个table或div，然后由于显示分辨率不同浏览器的高度和宽度是不一样的我希望不管浏览器是什么高度这个table或div始终处于中间，横向和纵向都是在中间位置的有什么办法吗...
假设页面中有一个table或div，然后由于显示分辨率不同浏览器的高度和宽度是不一样的我希望不管浏览器是什么高度这个table或div始终处于中间，横向和纵向都是在中间位置的有什么办法吗？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自电脑网络类芝麻团
采纳数：2084
获赞数：2766
参与团队：
html中使一个table或者div永远处于中间位置,首先需要理解块元素的概念，如div、table都是width和height属性，然后在通过css中的一个margin属性，来实现居中，具体用法看下图：不管浏览器的宽度是多少，这个属性就会将div居中，具体看下代码：&html&&head&&style&
width:400 & & & & & & & & & & & & & & &//通过给divwidth和heigh值，在通过margin属性来定位
height:200
margin:0 }
table{ & & & & & & & & & & & & & & & & & & & &&//通过给divwidth和heigh值，在通过margin属性来定位
margin:0 } &/style&&/head& &body&
&div id=&round&&
&p&我会居中&/p&
&td&我会居中&/td&
&/table& &/body&&/html&
tiandi1431
tiandi1431
可以这样子啊。&table align=&center&&
本回答被网友采纳
采纳数：19
获赞数：13
先获取浏览器的宽和高
然后再设置宽度和高度
来自电脑网络类芝麻团
采纳数：334
获赞数：270
参与团队：
使用 水平居中 就行了,在table或div里加入
align=center
zhuhongda163
zhuhongda163
采纳数：33
获赞数：56
设定好宽度
例如 width：1000px； 然后margin：0 auto；就好 了
其他2条回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。