1.Flexbox布局：
display:flex;
justify-content:center;
align-items:center;
width:100%;
2.Bootstrap柵格布局
一共12格，分成3塊，每塊占4列。居中的內容寫在中間的那一塊。
3.聖杯/雙飛翼（水平自適應居中的基礎上）
第一步：居中的div寫在最前面，width:100%撐滿一整行。三個div都向左浮動float:left;
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
第二步：讓三個div顯示在同一行
div.left { marin-left:100%}
div.right{ marin-left:自身的寬度}
第三步：讓中間的div能夠自適應
聖杯布局的做法：
div.main{
padding-left:左div的寬度；
padding-right:右div的寬度；
}
雙飛翼布局的做法：
在div.main內部再添加一個div.mc：
然后設置div.mc的margin值
margin-left:左div的寬度；
margin-right:右div的寬度；
現在，水平居中已經實現了；
第四步：垂直居中
在div.left,div.right,div.main外面再加一個div.wrap,
然后對div.con設置 display:table,對div.wrap設置
display:table-cell;
vertical-align:middle;
4.relative/positive + top/left+tarnsform
父元素：
position:relative
子元素：
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);意思是向右移動自身50%的寬度，向下移動自身50%的高度。
為什么有了top:50%;left:50%還要 transform: translate(-50%, -50%);
最初：
加了top:50%;left:50%后：
還需要再往左、往上挪一挪：
5.relative/positive + top/left+left + margin
和方法4一樣，用top和left挪到中間：
這之后用margin-left和margin-right進行處理：
先給div.child設置寬度，然后設置margin：
6.用top,left,bottom,right
計算公式：
top + div.child 的 height +bottom = div.parent 的 height
left + div.child 的 width +right = div.parent 的 width
如果子元素是行內元素，如<p>,要注意一開始就要去掉margin和padding
方法4、5、6有的demo，詳見 github