本人是前端的新人，這是第一次寫技術部落格，各位大大，本文有錯誤請指正，手中的板磚儘量輕拍，我怕疼~~

對於水平居中和垂直居中我也用過很多方法，但是有的時候管用有的時候又嗝屁不好使了。涉及到的情況很多，所以想細細的研究一番。隱隱感覺到前端的水好深~~

    <div class="box-wrap">
        <div class="box">
            我要居中
        </div>
    </div>

一、水平居中
1、text-align: center.
這個大家一般都用過，我就稍微扯一點：只要父級的div設定了這個屬性，裡面的文字就會居中（包括圖片）,這個屬性只對行內元素起作用。如果想要居中的是塊級元素，它就無能為力了，要麼把這個塊級元素display: inline-block;要麼換另一種方法。

.box-wrap {
  text-align: center;
}
.box {
  display:inline-block;
}

要點：要居中的必須是行內元素才有作用

2、margin： 0 auto;
這個算是一個大招了，想讓誰居中，就給誰設定上這個屬性，左右居中妥了。即使父級使用了絕對定位或者相對定位，也是妥妥的好使。但是啊但是，你必須給這個要居中的傢伙加上寬度width，否則白瞎。

.box {
  margin: 0 auto;
  width: 100px;
}

要點：
1、必須給要居中的元素設定寬度
2、這個傢伙不能是浮動元素，否則居中失效
3、沒有宣告DOCTYPE會導致居中失效

3、絕對定位法（左右+垂直居中）
要居中的元素給絕對定位，給相對於要居中的父級相對定位。具體看下面的程式碼。
重點是設定的margin負值。因為不給margin負值前居中的並不是子級這個整體，而是子級的上側和左側相交的那一點。所以要設定負值，往回拉一半。

.box-wrap {
  width: 1000px;
  position: relitive;//為了不讓你要居中的元素被定位到外太空去，這個一定要設定。
}
.box {
  width: 200px;
  height: 200px;
  position: absotion;
  top: 50%;
  left: 50%;
  margin-top
 
: -100px;//數值為高度的一半
  margin-left: -100px;//數值為寬度的一半
}

4、另類絕對定位（左右+垂直居中）

  .box-wrap {
    width: 1000px;
    height: 600px;
    position: relative;
    background: blue;
  }
  .box {
    width: 80%;
    height: 10%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: orange;
  }

要點：ie8及ie8以下無效

大家測試的時候給各級元素加上background或者border會比較方便。//新手之言，有錯輕拍
除了上面的這些還有其他的CSS奇淫技巧，就不一一說了，有興趣的可以自己去收集下。