CSS垂直居中方法

w3c指定盒子模型（標準模型）

首先，水平居中很簡單：margin: 0 auto

垂直居中：

方法一：使用相對定位和 margin-top 屬性對元素進行垂直居中

由於div元素的祖先元素html和body的高度預設是為0的，所以需要設定為100%，並且清除預設樣式，即把margin和padding設定為0，如果不清除預設樣式的話，瀏覽器就會出現滾動條。

top屬性可以使元素向下偏移。但預設情況下，由於position的值為static（靜止的、不可以移動的），元素在文件流裡是從上往下、從左到右緊密的佈局的，我們不可以直接通過top、left等屬性改變它的偏移。所以，想要移動元素的位置，就要把position設定為不是static的其他值，如relative,absolute,fixed等。（注意，relative是不會使元素脫離文件流的，absolute和fixed則會！也就是說，relative會佔據著移動之前的位置，但是absolute和fixed就不會）。

    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* 水平居中 */
            margin: 0 auto;
            position: relative;
            top: 50%;
            margin-top: -100px;
        }
    </style>
 

注：這個方法相容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。

方法二：使用 transform 屬性

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* 水平居中 */
            margin: 0 auto;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
 

注：這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸，因為transform中偏移的百分比就是相對於元素自身的尺寸而言，當被居中的元素是被自己內部元素撐開寬或者高的時候可適用此方法。

方法三：絕對定位結合 margin:auto

<style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
            
        }
    </style>

方法四：使用 CSS3 的彈性佈局（flex）

使用CSS3的彈性佈局很簡單，只要設定父元素（這裡是指body）的display的值為flex即可。

    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>

Flex是Flexible Box的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。具體可以看另一條筆記：