其中html代码如下，问题在代码后：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&注册&/title&
&link type="text/css" href="css/login.css" rel="stylesheet" /&
&div class="contianer"&
&div class="login"&
&label&注册界面&/label&
&div class="information"&
&div class="heads"&
&h2 class="zc"&注册 &/h2&&h4
class="denglu"&&a href="#"& 登陆&/a&&/h4&
&div class="forms"&
&form method="post"&
&table class="tb"&
&td&用户名:&/td&
&td&&input type="text" placeholder="至少4个字符"&&/td&
&td&密码:&/td&
&td&&input type="password" placeholder="至少8个字符"&&/td&
&td&身份证:&/td&
&td&&input type="text" placeholder="18位数字"&&/td&
&td&邮箱:&/td&
&td&&input type="text" placeholder="18位数字"&&/td&
&div class="btn"&
&input type="submit" value="提交" class="sub"/&
&input type="reset" value="重置" class="sub"/&
&div class="xieyi"&
&div class="bg"&
&div class="text_xieyi"&
协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议。
协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议。
&div class="btn_xieyi"&
&button class="sub" id="xieyiok"&确定&/button&
&button class="sub" id="xieyireset"&取消&/button&
&/html&需要居中显示部分：class="information"
的div模块 和 class="xieyi"的div模块，问题1：其中xieyi模块的css我是这样写的可以居中，但是总感觉不太好，不知道是否合理？以及如果模块宽高是非固定情况改如何做？问题2：information模块部分，非固定宽高，写了好久都无法页面居中，求教css写法？问题1代码：
width: 500
background-color: #696969;
margin-left: -250
margin-top:25%;
.contianer{
width: 900
height: 900
background-color:
color: #FFFFFF;
margin-left: 10
color: #FFFFFF;
.information{
width: 300
background-color:
}问题简化代码：&div class="d1"&
&div class="d2"&
&div class="d3"&
问题：在d1 ,d2是其他显示布局样式时候，有且仅d3为界面居中CSS写的方式（固定规格和非固定规格）？？
水平居中一般是设置margin:0其中0是上下外边距的值，auto是左右外边距的值——因为是auto(自动)，所以不管这个元素的宽度是否固定，都是生效的,不过这个方法只能用于块级元素,比如div。注意，这里所说的居中，是相对于其父级元素而言的，也就是说假如是这样的结构——&div&&div&&/div&&/div&,内层的div设置了margin:0它的位置不会因此就相对于窗口(其实是body元素)水平居中，而是相对于外层div水平居中而已。如果是行内元素，要想使用上述方法，可以将其变成块级元素，设置display:或者display:或者display:等等。定位的使用要看情况而定，因为定位往往会脱离文档流，影响到后面的元素。
已被提问者采纳
你还没有登录，请先登录或注册慕课网帐号
.xieyi{margin:0}补充这个居中至于.information部分，如果没设定宽度的话，可以给他设定text-align:或者是float: position: left:50%;相对定位，偏移50%到页面中间，然后子元素再设定-50%，此时子元素相对于父元素向左偏移50%，就达到居中的目的了
你还没有登录，请先登录或注册慕课网帐号
Happy learning
加油 你一定可以的...
margin：0 auto；这个代码是居中，具体理解可以到这里：
margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
你还没有登录，请先登录或注册慕课网帐号
设置margin 0 auto
你还没有登录，请先登录或注册慕课网帐号
57642人关注
23781人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2博客访问： 369701
博文数量： 195
博客积分： 0
博客等级： 民兵
技术积分： 1612
注册时间：
认证徽章：
努力, 努力, 再努力
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： Html/Css
/q/1903/a-3212
top: 50%; left: 50%;
transform: translate(-50%, -50%);
能起到居中的效果这里不应该相互抵消掉了相当于没有布局么
top,left跟根据父元素的宽和高偏移的，而transform: translate(-50%, -50%);是根据自身的宽高偏移的。
所以本质上理解
阅读(98) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
请登录后评论。JQuery（11）
jquery对象访问:
1. each(callback):以每个匹配的元素作为上下文来执行一个函数，停止循环;跳至下一个循环。
来个实例 :&&&&&&&&&&&&&&
$(&img&).each(function(){
&&&&&& $(this).toggle(&example&);
})&&&&&&&&
2.size()与length相同，都是返回jquery对象中元素的个数。
&& $(&img&).size();或$(&img&).
3.get():取得所有匹配的DOM元素集合(注意返回是dom对象，而非jquery对象)
$(&img&).get().reverse();
4.get(index)：取得其中一个匹配的元素。index表示匹配第几个元素,可以让你操作一个实际的dom元素。
$(&img&).get(0);//得到第一个匹配的img元素
$(this).get(0)与$(this)[0]等价
5.index(subject)：搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
选择器-基本:
selector1,selector2,selectorN将匹配到的元素合并后一起返回
$(&div,span,p.myClass&);
选择器-层级:
1.ancestor descendant在给定的祖先元素下匹配所有的后代元素
&&& $(&div input&);//div下所有input
2.parent & child 在给定的父元素下匹配所有的子元素
&&& $(&div & input);//父元素下的子元素
3.prev + next 匹配所有紧接在prev元素后的next元素
$(&div + span&)//紧接在div后的span
4.prev ~ siblings 匹配prev元素之后的所有siblings元素
$(&form ~ input&)//找到所有与表单同辈的input元素
选择器-简单:
1.:first 匹配找到的第一个元素
$(&tr:first&)//查找表格中第一行
2.:last 匹配找到的最后一个元素
$(&tr:last&)//匹配找到的最后一个元素
3.:not(selector) 去除所有与给定选择器匹配的元素
&& ps:jquery 1.3中，已支持复杂选择器了(例如：:not(div a)和:not(div,a))
&& $(&input not(:checked)&)//所有未被选中的input元素
4.:even 匹配所有索引值为偶数的元素，从0开始计数
&& $(&tr:even&)//查找表格中偶数行
5.:odd匹配所有索引值为奇数的元素，从0开始计数
&& $(&tr:odd&)//查找表格中奇数行
6.:eq(index)匹配一个给定索引值的元素
&& $(&tr:eq(1)&)//查找第二行
7.:gt(index)匹配所有大于给定索引值的元素
&& $(&tr:gt(0)&)//查找大于0的所有行
8.:lt(index)匹配所有小于给定索引值的元素
$(&tr:lt(2)&)//查找小于2的所有行
9.:header 匹配如h1,h2,h3之类的标题元素
&& $(&:header&).css(&background&,red&);//所有标题加上背景色
10.:animated 匹配所有正在执行动画效果的元素
选择器-内容:
1.:contains(text) 匹配包含给定文本的元素
&& $(&div:contains('aaa')&)查找所有包含有aaa的div元素
2.:empty()匹配所有不包含子元素或文本的空元素
&& $(&td:empty&)
3.:has(selector)匹配含有选择器所匹配的元素的元素
&& $(&div:has(p)&).addClass(&test&);//给所有包含p元素的div元素添加一个text类
4.:parent匹配含有子元素或者文本的元素
&& $(&td:parent&);//查找所有含有子元素或者文本的td元素
选择器-可见性:
1.:hidden匹配所有不可见元素，input元素的type属性为hidden的话也会被匹配
&& $(&tr:hidden&);//查找所有不可见的tr元素
2.:visible匹配所有可见元素
&& $(&tr:visible&);//查找所有可见的tr元素
选择器-属性:
<span style="color:#.[attribute]匹配包含给定属性的元素
&&& $(&div[id]&)//查找所有含有id属性的div元素
<span style="color:#.[attribute=value]匹配给定的属性是某个特定&#20540;的元素
&&& $(&input[name='username']&)//查所所有name=username的input元素
3. [attribute!=value]匹配所有不含有指定属性，或者属性不等于特定&#20540;的元素
&&&& 此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定&#20540;的元素，请使用［attr]:not([attr=value])
&&& $(&input[name!='username']&)//查找所有name!=username的input元素
4. [attribute^=value]匹配给定的属性是以某些&#20540;开始的元素
&&& $(&input[name^='user'])//查找所有name以'newws'开始的input元素
5. [attribute$=value]匹配给定属性是以某些&#20540;结尾的元素
&& $(&input[name$='letter']) //查找所有name以'letter'结尾的input元素
6. [attribute*=value]匹配给定的属性是以包含某些&#20540;的元素
&& $(&input[name*='man']&)//查找所有name包含'man'的input元素
7. [selector1][selector2][selectorN]复合属性选择器，冉要同时满足多个条件时用。
&&& $(&input[id][name='man']&)//含有id属性，并且name为man的
选择器-子元素:
1.:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素
&&& $(&ul li:nth-child(2)&)//在每个ul查找第2个li
2. :first-child匹配第一个子元素
&&& $(&ul li:first-child&)//在每个ul中查找第一个li
3.:las-child匹配最后一个子元素
&&& $(&ul li:last-child&)// 在第个ul中查找最后一个li
4.only-child如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，不会被匹配
&& $(&ul li:only-child&)//在ul中查找是唯一子元素的li
选择器-表单:
1.:input ，:text ，:password ，:radio ， :checkbox ，:submit ，:image ，:reset ，:button , :file
2.:hidden匹配所有不可见元素，或type为hidden的元素
选择器-表单对象属性:
1.:enable匹配所有可用元素
&& $(&input:enabled&)//查找所有可用的input元素
2.:disabled匹配所有不可用元素
&& $(&input:disabled&)//匹配所有不可用元素
3.:checked匹配所有选中的被选中元素(复选框、单选框、不包括select中的option)
&&& $(&input:checked&)//查找所有选中的复选框元素
4.:selected匹配所有选中的option元素
&&& $(&select option:selected&)//查找所有选中的选项元素
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：494996次
积分：5884
积分：5884
排名：第3916名
原创：81篇
转载：233篇
评论：30条
微信公众平台：胖蛇的异想世界
扫一扫，也不会怀孕
(2)(3)(13)(1)(1)(4)(4)(16)(10)(4)(11)(4)(10)(10)(6)(15)(44)(22)(5)(8)(18)(15)(4)(2)(11)(7)(3)(16)(23)(4)(2)(1)(1)(2)(3)(12)父元素使用相对定位，子元素使用绝对定位，父元素怎么被撑开？
父元素使用相对定位，子元素使用绝对定位，父元素怎么被撑开？
如题父元素使用相对定位relative，子元素使用绝对定位absolute，这个时候子元素脱离了文档流，父元素的高度是0，我的需求是父元素怎么被撑开？父元素的高度根据子元素的高度自适应。最好使用css方法。
你这样的要求用css貌似是无法达到的，一般用到position:absolute的情况都是不需要管父元素大小的吧。。实在需要还是用float去吧
用js实现吧
旧回答有误，请忽略
更新：事实上旧回答给出的方法只能适用于子元素使用 float 的时候，没看清问题就随意作答，很抱歉。
因为 BFC 的高度计算包含浮动元素，同时清除浮动元素也会让父元素撑开，所以可以实现父元素被子元素撑开的需求。
但是 position:absolute 或者 position:fixed 就不一样，它是脱离文档流的，而且不会计算被父元素计算在内，同时也没有办法像浮动一样被清除。所以你的需求应该是无法满足的。
旧回答：只要在父元素创建一个 BFC 就可以，或者清除浮动。比如：
display:inline-
.child:after{
content:'';
你可以搜索一下怎么产生 BFC，和如何清除浮动。可以找出更多的方法
你用absolute就已经脱离文档流，又要文档把它算进里面去，这要求有点精分。你可以用relative定位，不是非得用absolute的。
再说，如果你父元素里没有其它元素，那用absolute的意义是什么。
精分+1，用浮动吧
Copyright & 2016 phpStudy