css中margin:auto的使用？
阿新 • • 發佈：2020-12-27
login-page：
login-form：
<body>
<div id="login-page" >
<div class="login-form">
</div>
</div>
</body>#login-page { border:1px solid blue; } .login-form { border: 1px solid red; width:200px; height:250px; margin: auto; }
當子元素margin:auto時，其左右margin將會平分剩餘“可用空間” ---> 因此，會出現“水平居中”現象。（子元素整體佔用的是父元素的content部分，所以 子元素左右margin：(962-200-2)/2=380）
#login-page { border:1px solid blue; } .login-form { border: 1px solid red; width:200px; height:250px; margin-left: auto; /*佔用左側全部可用空間*/ /* margin-right: auto;*/ /*佔用右側全部可用空間*/ } .login-form a{ /*margin: auto;*/ /*不管用*/ margin-top: 50px; /*不管用*/ }
由於auto左右均勻佔據可用空間，如果只設置其中一個時，則會出現左移/右移。
注意：以上屬性設定方式，不適用於浮動和行內元素（如上圖），且不能用於絕對和固定定位元素。
垂直居中
首先要設定該div元素祖先元素html、body的高度為100%（因為預設是0），並且要清除預設樣式（即把margin、padding設定為0），如果不清除預設樣式的話，瀏覽器會出現滾動條...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ } </style> </head> <body> <div class="content"></div> </body> </html>
接下來就是要把div往下移，由於預設情況下，position的值是static（元素在文件流中是從上往下，從左往右緊密佈局的），所以不能直接設定top、left等屬性改變偏移量。所以，要想移動位置，則要先把position設定為不是static的其他值（relative、absolute、fixed），然後通過top、left、right、bottom等屬性使其在文件中發生偏移。（注意：relative不會使元素脫離文件流，absolute和fixed會，也就是說，relative會佔據移動之前的位置，但是absolute和fixed就不會）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*設定position屬性*/
left：0；
right：0；
top：0；
bottom：0
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>備註：CSS3中彈性佈局（flex）將很好的解決垂直居中問題。