其中html代码如下，问题在代码后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link type="text/css" href="css/login.css" rel="stylesheet" />
</head>
<body>
<div class="contianer">
<div class="login">
<header>
<label>注册界面</label>
</header>
<hr />
<div class="information">
<header>
<div class="heads">
<h2 class="zc">注册 </h2><h4 class="denglu"><a href="#"> 登陆</a></h4>
</div>
</header>
<div class="forms">
<form method="post">
<table class="tb">
<tr>
<td>用户名:</td>
<td><input type="text" placeholder="至少4个字符"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" placeholder="至少8个字符"></td>
</tr>
<tr>
<td>身份证:</td>
<td><input type="text" placeholder="18位数字"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" placeholder="18位数字"></td>
</tr>
</table>
<footer>
<div class="btn">
<input type="submit" value="提交" class="sub"/>
<input type="reset" value="重置" class="sub"/>
</div>
</footer>
</form>
</div>
</div>
</div>
<div class="xieyi">
<div class="bg">
<div class="text_xieyi">
<span>
协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议。
协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议。
</span>
</div>
<div class="btn_xieyi">
<button class="sub" id="xieyiok">确定</button>
<button class="sub" id="xieyireset">取消</button>
</div>
</div>
</div>
</div>
</body>
</html>需要居中显示部分：class="information" 的div模块 和 class="xieyi"的div模块，问题1：其中xieyi模块的css我是这样写的可以居中，但是总感觉不太好，不知道是否合理？以及如果模块宽高是非固定情况改如何做？问题2：information模块部分，非固定宽高，写了好久都无法页面居中，求教css写法？问题1代码：
.xieyi{
width: 500px;
position: absolute;
float: left;
background-color: #696969;
display: block;
margin-left: -250px;
left:50%;
margin-top:25%;
}
.contianer{
width: 900px;
height: 900px;
background-color: antiquewhite;
margin: auto;
}
.zc{
color: #FFFFFF;
float: left;
margin-left: 10px;
}
.denglu{
position: relative;
float: right;
right: 10px;
}
.forms{
color: #FFFFFF;
clear: both;
}
.login{
position: absolute;
float: left;
}
.information{
border: 1px solid red;
width: 300px;
background-color: dimgray;
}问题简化代码：<div class="d1">
......
......
<div class="d2">
......
<div class="d3">
问题：在d1 ,d2是其他显示布局样式时候，有且仅d3为界面居中CSS写的方式（固定规格和非固定规格）？？
</div>
......
</div>
......
......
</div>
4 回答
已采纳
蛋加树
TA贡献29条经验 获得超13个赞
水平居中一般是设置margin:0 auto;其中0是上下外边距的值，auto是左右外边距的值——因为是auto(自动)，所以不管这个元素的宽度是否固定，都是生效的,不过这个方法只能用于块级元素,比如div。
注意，这里所说的居中，是相对于其父级元素而言的，也就是说假如是这样的结构——<div><div></div></div>,内层的div设置了margin:0 auto;它的位置不会因此就相对于窗口(其实是body元素)水平居中，而是相对于外层div水平居中而已。
如果是行内元素，要想使用上述方法，可以将其变成块级元素，设置display:block;或者display:table;或者display:flex;等等。
定位的使用要看情况而定，因为定位往往会脱离文档流，影响到后面的元素。
司禄德
TA贡献1条经验 获得超0个赞
.xieyi{margin:0 auto;}补充这个居中
至于.information部分，如果没设定宽度的话，可以给他设定text-align:center;或者是
float:left; position:relative; left:50%;相对定位，偏移50%到页面中间，然后子元素再设定-50%，此时子元素相对于父元素向左偏移50%，就达到居中的目的了
Happy_learning
TA贡献7条经验 获得超1个赞
margin：0 auto；
这个代码是居中
margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
- 4 回答
- 1 关注
- 2669 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消