margin auto position定位使盒子居中
建議先讀一下這篇position定位的基準：
http://blog.csdn.net/qq_35809245/article/details/53637512
position定位如何在父盒子居中
一 簡單瞭解position定位取值：
- position:left right bottom top length|%
- length 是確定單位距離的取值，單位以px em等
- 百分比%,此時要明確百分比對應的取值標準，水平方向 left= 百分比值 X 父元素的寬度(基準是父元素padding+width)，垂直方向 top = 百分比值 X 父元素的高度(此時基準是父元素的padding+height)；前提是父元素設置了除 static之外的定位，否則，百分比取值基準是瀏覽器的高度和寬度。
二 margin 取值
- auto：水平（默認）書寫模式下，margin-top/margin-bottom計算值爲0，margin-left/margin-right取決於可用空間。思考 auto 的取值什麼時候會起作用。
- length : 用長度值來定義外補白。可以爲負值
- 百分比： 用百分比來定義外補白。水平（默認）書寫模式下，參照其包含塊 width 進行計算，其它情況參照 height ，可以爲負值
三：理解margin的auto取值問題：
標準流下的margin的auto取值：對於塊級元素，margin：0 auto ;可以使塊級元素居中顯示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigbox { width: 800px; height: 200px; margin: 100px auto; //使bigbox在body中居中 border: 1px solid #000; } .smallbox { width: 100px; height: 100px; background-color: limegreen; margin:0 auto; //使smallbox在bigbox中居中 } </style>
效果如下：
標準流下的auto取值：如果發生了元素轉化，塊級元素轉化爲行內塊元素,display:inline-block position float 等
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigbox { width: 800px; height: 200px; margin: 100px auto; //使bigbox在body中居中 border: 1px solid #000; position:absolute; //display:inline-block; } .smallbox { width: 100px; height: 100px; background-color: limegreen; margin:0 auto; //使smallbox在bigbox中居中 position:absolute; //display:inline-block; } </style>
效果如下：
建議大家拿到自己的瀏覽器上看效果：此時 margin的 auto 你會奇怪的發現不起作用了。
bigbox不在body中居中，smallbox不在bigbox中居中。
auto：水平（默認）書寫模式下，margin-top/margin-bottom計算值爲0，margin-left/margin-right取決於可用空間。品味這句話：我們可以理解，塊級元素獨佔一整行，即使設置了寬高，仍然獨佔一整行；而行內塊元素卻不是。所以 ，margin 的auto值對於塊級元素使用時候，會使其居中顯示，而對於行內塊元素使用的時候，卻不會使其居中。
四：定位使盒子居中的方法：
兩種方法：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.bigbox {
width: 800px;
height: 200px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
.smallbox {
width: 100px;
height: 100px;
background-color: limegreen;
position: absolute;
left: 50%;
/*定位的百分比 left=百分比*父元素的寬度*/
margin-left: -50px;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="smallbox"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.bigbox {
width: 800px;
height: 200px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
.smallbox{
background-color: limegreen;
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0;
margin:0 auto;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="smallbox"></div>
</div>
</body>
</html>
其中第二種方法適用於不知道子元素的高寬的時候想要使子元素居中的效果。
擴展：如果去掉bigbox的寬度設置，那麼，無論瀏覽器的窗口如何變化，都可以使盒子居中，包括大盒子的body居中，小盒子在大盒子居中。