div自適應水平垂直居中的方法

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