頁面水平居中佈局
個人的學習筆記
一.水平居中佈局（核心程式碼，四種方式）
1.display：flex + justify-content:center || margin：0 auto
.parent寬是不固定的
類名為.child的div是display：block 預設與父元素同寬，父元素設定了display：flex後，子元素（.child）就變成了flex-item預設的寬是會根據內容的寬，父級元素再設定justify-content:center，子元素（.child）就會水平居中（如圖）。
這樣佈局的優缺點：
優點：只需要在父元素上設定就ok了，不需要在子元素中設定。
缺點：display：flex 在IE 6 7 8 中是不支援的
2.display：inline-block + text-align：center
子元素設定display：inline-block 後寬度會根據內容寬（inline-block的特點），父元素設定text-align：center（對inline元素起作用，對inline-block元素也起作用）。
改佈局的優缺點：
優點：兼任性很好（雖然inline-block不支援IE 6 7 但可以用display：inline + room：1 來代替 就支援了）
缺點：父級元素設定了text-align：center 它的子元素 子子元素 子子子元素… 內容都會居中。
3.display:table + margin:0 auto
子元素設定display：table 盒子寬會根據內容寬（table雖然跟block很相似，但這點不同）
再設定margin：0 auto （margin：0 auto 只作用block元素，也說了table與block有點相似也可以用）。
改佈局優缺點：
優點：只要在子元素設定就ok了，你不需要在父元素設定
缺點：display：table不支援IE 6 7 （但可以把結構換成table就可以兼任了）
4.absolute + transform
父元素設定position:relative 可使父元素做為參造物
子元素設定absolute 看使盒子寬根據內容寬（absolute特點）設定left：50% 是向右邊過去盒子距離的一半的（不居中） 再設定translateX（-50%）才向左邊移動盒子的一半（translateX 百分比的參造物是自身）
改佈局的優缺點：
優點：absolute是脫離文件流的（absolute的特點），不會影響後面的元素
缺點：transform屬於css3的內容不支援IE6 7 8