CSS佈局——div居中方法

1、絕對居中

給div設定樣式，div預設顯示位置為body的左上方。

            width: 400px;
            height: 300px;
            background-color: orange;

如下圖所示：

首先給div新增絕對定位，並設定上下左右邊距為0，然後使用margin: auto;自動居中。

            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

結果如下所示：

2、水平垂直居中

給其父元素新增display: flex;彈性佈局。
內容對齊（justify-content）屬性：應用在彈性容器上，即父元素上。把彈性項沿著彈性容器的主軸線（main axis）對齊，如果橫向有多個div，則X軸就為當前彈性容器的主軸線，Y軸為副軸線，反之亦然。

            display: flex;
            justify-content: center;
            align-items: center;

結果顯示如下：

如果註釋掉align-items: center;屬性，元素則按照當前主軸X軸居中，由於給元素開啟彈性佈局，故主軸應為X軸，可設定兩個div驗證。

            display: flex;
            justify-content: center;
            /*align-items: center;*/

顯示結果如下：

如果註釋掉justify-content屬性，使用align-items: center;屬性，則居中對齊彈性盒的各項 <div> 元素，預設是沿著副軸Y軸居中，（上文提到過：由於給元素開啟彈性佈局，故主軸應為X軸）。

            display: flex;
            /*justify-content: center;*/
            align-items: center;

顯示結果如下：

3、（定位+變形）居中

給父元素新增 position: relative;相對定位。

給自身元素新增position: absolute;絕對定位。

top: 50%;使自身元素距離上方“父元素的50%高度”的高度。

left: 50%;使自身元素距離上方“父元素的50%寬度”的寬度。

transform: translate(-50%,-50%);使自身元素再往左，往上平移自身元素的50%寬度和高度。

             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);

顯示結果如下：