這段時間在做百度前端技術學院的任務，自己總結了許多細節方面的改進和體會，css中主要分為兩部分：一是如何利用css進行佈局，具體內容請看我上一篇部落格《css佈局總結》；二就是如何解決css居中佈局。

簡單來說，css佈局有以下三個方案：
（一）text-align和vertical-align
對父元素設定text-align: center或vertical-align: middle，只對子元素為內聯元素時才起作用。text-align: center水平居中，這條語句很好理解，也經常用到，如實現段落居中；vertical-align: middle垂直居中就存在很多坑了，有時候想用這條語句實現簡單的垂直居中，就是實現不了emoticon。那是為什麼呢？我們都知道display有三種不同的屬性：inline、inline-block和block，就好像物質的三種狀態：液態、固液混合和固態，只有一個元素屬於inline、inline-block或block時其自身的vertical-align屬性才起作用。不建議使用這個屬性，因為搞不好就會發狂，但是在做圖片垂直居中的時候還是蠻喜歡它的，哈哈！

<a href="" class="header__nav__link">
    <img src="./images/login-icon.png" alt="" class="header__icon">
    登入
</a>

.header__icon{
    vertical-align: text-bottom;
}

（二）萬能的position
利用position屬性可實現水平居中和垂直居中，精髓在於transform: translate()，具體案例如下：

<div class="container">
    <div
 
 class="container__left"></div>
    <div class="container__right"></div>
</div>

.container{
    position: absolute;
    width: 400px;
    height: 200px;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.container{
    position: absolute;
    width: 400px;
    height
 
: 200px;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
    margin:  auto;
}

在父元素上設定position: relative屬性，若不設定則以根目錄為參照物，這裡把.container設定為position: absolute;就是將body作為參照物，方案一在子元素上設定 position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%)，top和left是以參照物的寬高作百分比，transform: translate()中的百分比則以自身寬高為參照物。方案二應用的非常巧妙，簡單直接，不過需要注意的是需要設定height，否則margin：auto；無效，若不設定height，程式不會給出預設值，因為區域高度是隨內容高度變化的，所以margin：auto 0不會自動平分margin-top和margin-bottom。

（三）神奇的flex
利用flex做居中問題是山重水複疑無路的一種辦法，flex很優雅，也很紳士，就像是看到柳暗花明一樣。
只需要在父元素上設定display: flex;justify-content: center;align-items: center;即可實現水平垂直居中，是不是簡單又暴力emoticon，但是其相容性不好，所以在前面幾個方案無法實現的前提下再考慮用它。