其中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位數(shù)字"></td>
</tr>
<tr>
<td>郵箱:</td>
<td><input?type="text"?placeholder="18位數(shù)字"></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>
協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議。
協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議協(xié)議。
</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寫的方式（固定規(guī)格和非固定規(guī)格）？？
????????????</div>
????????......
????????</div>
????......
????......
</div>
4 回答
已采納
蛋加樹
TA貢獻(xiàn)29條經(jīng)驗 獲得超13個贊
水平居中一般是設(shè)置margin:0 auto;其中0是上下外邊距的值，auto是左右外邊距的值——因為是auto(自動)，所以不管這個元素的寬度是否固定，都是生效的,不過這個方法只能用于塊級元素,比如div。
注意，這里所說的居中，是相對于其父級元素而言的，也就是說假如是這樣的結(jié)構(gòu)——<div><div></div></div>,內(nèi)層的div設(shè)置了margin:0 auto;它的位置不會因此就相對于窗口(其實(shí)是body元素)水平居中，而是相對于外層div水平居中而已。
如果是行內(nèi)元素，要想使用上述方法，可以將其變成塊級元素，設(shè)置display:block;或者display:table;或者display:flex;等等。
定位的使用要看情況而定，因為定位往往會脫離文檔流，影響到后面的元素。
司祿德
TA貢獻(xiàn)1條經(jīng)驗 獲得超0個贊
.xieyi{margin:0 auto;}補(bǔ)充這個居中
至于.information部分，如果沒設(shè)定寬度的話，可以給他設(shè)定text-align:center;或者是
float:left; position:relative; left:50%;相對定位，偏移50%到頁面中間，然后子元素再設(shè)定-50%，此時子元素相對于父元素向左偏移50%，就達(dá)到居中的目的了
Happy_learning
TA貢獻(xiàn)7條經(jīng)驗 獲得超1個贊
margin：0?auto；
這個代碼是居中? ? ? ?
margin后面如果只有兩個參數(shù)的話，第一個表示top和bottom，第二個表示left和right
因為0 auto，表示上下邊界為0，左右則根據(jù)寬度自適應(yīng)相同值（即居中）
添加回答
舉報
0/150
提交
取消