css中水平對齊及垂直對齊總結

水平及垂直居中是網頁布局中無法繞過的問題，總結如下，供學習和回顧。

水平居中：

　　1.父元素是塊元素，子元素是行內元素。

　　對父元素使用text-again:center 來設定行內元素水平居中。

　　2.父元素是塊元素，子元素是塊元素且寬度已經設定。

　　解法1：給子元素添加margin：0 auto；

　　解法2：當父元素和子元素寬度都已知的情況下，給父元素設定padding-left或padding-rigt，或者給子元素設定margin-left或margin-right，長度為（父元素寬度-子元素寬度）/2，給父元素和子元素設定為box-sizing:border-box;可方便計算，否則得加上父元素和子元素的邊框寬度。

　　解法3：子元素相對父元素的決定定位來解決

#parent{
    position:relative;  
}
#child{
    position:absolute;
    left:50%;
    margin-left:-50px; //消除父元素偏離的影響
}   

　　解法4：利用給父元素設置flex

    #par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 200px;
            display: flex;
            flex-direction: row;
            justify-content: center;

垂直居中：設定父元素是塊級元素，且高度已經確定

　　1.子元素是行內元素

　　給父元素設定line-height且其高度等於行內元素的高度

　　2.子元素是塊級元素，但是其高度沒有確定，給父元素設置display屬性

#par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 200px;
            width: 400px;
            display: table-cell;
            vertical-align: middle;

　　3.利用flex

   #par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 200px;
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;

　　4.子元素是塊級元素且高度已經設定

　　計算父元素的padding-top或padding-bottom，計算方法為(父元素高度-子元素高度)/2

　　計算子元素的margin-top或margin-bottom，計算方法為父(元素高度-子元素高度)/2

　　5.給父元素和子元素定位

　　

#par {
            box-sizing: border-box;
            border: solid 2px red;
            height: 300px;
            width: 400px;
            position: relative;
        }
        #chi {
            box-sizing: border-box;
            border: solid 2px blue;
            background-color: yellow;
            height: 100px;
            width: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }