css元素居中方法歸納

統一HTML代碼：

<div class="outer">
    <div class="inner"></div>
</div>

相同的css代碼抽取：

.inner{
    width: 50px;
    height: 50px;
    background-color: aqua;
}
.outer{
    border: 1px solid black; 
}

①、margin:auto && 絕對定位

.inner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.outer{
    position: relative;
    width:100px;
    height: 100px;
}

注意點：
①、absolute生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
inner設置了absolute定位，所以要在outer設置relative，這樣才能相對於outer進行相對定位，否則相對於body定位，因爲默認是static定位。
left、right等不一定要設置爲0，只要left和right的值相等，即可實現水平居中。
同理，top和bottom的值相等，即可實現垂直居中。

②、margin負值 && 相對定位

 .inner{
    position: relative;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;         /* 外邊距爲自身寬高的一半 */ 
}

注意點：
①、inner元素要設爲relative
②、margin外邊距爲自身寬高的一半（負數）

③、CSS3 transform屬性

.inner{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

注意點：
①、inner元素要設爲relative
②、transform 屬性向元素應用 2D 或 3D 轉換，translate(x,y) 定義 2D 轉換

④、css flex佈局

.outer{
    display: flex;
    align-items: center;         /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}

最後在本文末尾還會提到 定位對於元素特徵的改變
在介紹css元素居中方法之前，我們有必要認識一下元素的三種類型

html元素有三種類型：

①、塊狀元素： 如div -------- display：block
②、內聯元素： 如span ------display：inline
③、內聯塊元素：如input ---- display：inline-block

塊狀元素特徵：
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標籤寫在一起，默認排列方式爲從上至下

行內元素特徵：
(1)設置寬高無效
(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
在IE7的時候，padding-top 和 padding-bottom無效
(3)不會自動進行換行

行內塊狀元素特徵：
(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式爲從左到右

在position設置爲 fixed或者absolute的時候，元素會脫離文檔流
*此時對於行內元素來說可以設置寬高