居中

日常工作常用到居中，方法很多，在這裏梳理幾種常見方法

水平居中

大致列表，主要有三類：

1.適用塊級元素水平居中

居中元素css： margin:0 auto

2.適用行內元素水平居中

父元素： text-align:center

3.需要已知居中元素的寬

居中元素:：left:50%;margin-left: -(居中元素寬/2)；

水平垂直居中

絕對定位居中

父元素： 
  position: relative
居中元素： 
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  overflow: auto;
 

講一講這個的原理，先把居中元素從文檔流脫離所以設置了絕對位置，父元素設置相對位置就可以包裹絕對位置的居中元素，四個邊的絕對路徑為0，其實是為了重繪（讓瀏覽器重新計算四個邊）使居中元素的block充滿父元素的可用空間，這時候margin：auto就有效果，使之自適應居中，overflow自然是為了讓超出父元素自適應。

適用於自適應不知長寬的居中

display:flex

父元素：
  display: flex;
  justify-content:center;
  align-items:Center;

display:flex是一種常用於移動端的布局，多欄多列布局。

這裏提供了兩個屬性可居中，需要兼容多個瀏覽器寫前綴，不知道的可自行學習。

display:table-cell

父元素：
  text-align:center;
  display:table-cell;
  vertical-align: middle

display:table-cell是一種表格式布局，想深入了解可看看張鑫旭的博客（css牛人）
http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/

負邊距居中

居中元素：
  width: xx; height: xx;
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -（高/2）px;
  margin-left: -（寬/2）px;  
 

需要知道居中元素的寬高

常用的居中方式