這一部分主要介紹div盒子的水平垂直居中，一種移動端兩種PC端。

說明：垂直水平居中的盒子的外圍可以是一個div盒子（div–div），也可以是整個頁面body（body–div）。無論是哪一種，方法都是一樣的。本部落格以【div–div】的情況介紹。
看效果圖，如下：

接下看程式碼：
先來看統一的html結構:

<--統一的html結構-->
<div class="wrap">
    <div class="center"></div>
</div>

CSS程式碼：

/*PC端，方式一：margin+position（不相容IE6）*/
 

.wrap {
    width: 200px;
    height: 200px;
    background: #00FF00;
    position: relative;
}

.wrap .center {
    width: 100px;
    height: 100px;
    background: #00FFFF;
    /*關鍵點如下*/
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*PC端，方式二：position+margin（相容所有瀏覽器）*/
 

.wrap {
    width: 200px;
    height: 200px;
    background: #00FF00;
    position: relative;
}
.center {
    background: #00FFFF;
    position: absolute;
    width: 100px;
    height: 100px;
    /*關鍵點如下*/
    left: 50%;
    top: 50%;
    margin-left:-50px;/*對應中間盒子寬度的一半*/
    margin-top:-50px;/*對應中間盒子高度的一半*/
}

/*移動端，flex+margin*/
 

.wrap {
    background: #0f0;
    width: 200px;
    height: 200px;
    display: flex; /*屬性1*/
}

.center {
    background: #0ff;
    width: 100px;
    height: 100px;
    margin: auto;/*屬性2*/
}

兩種PC端寫法，包括相容ie6的，一種移動端推薦寫法。

下一篇，介紹圖片如何在div中設定垂直水平居中。